intent.alan

// Use this sample to create your own voice commands
// intent('hello world', p=>  {
//     p.play('(hello|hi there)');
// });

intent('Who are you?', 'Who is your creator?',
       reply('This is allen, virtuval assistant for krishna'));

intent('Whats your age?',
       reply('I am 1month old. But i am too technical. Ask me anything related to front end'));

intent('What does this app do?', 'What can I do here?',  'What you do?',
       reply('This is a ui web Kit. Which helps front end developers to learn new Javascript frameworks'));

let savedArticals = []
// hit blog api

intent('Give me the latest $(tech* (.*)) news', (p) => {
    let NEWS_BLOG_API = `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@KrishnaUIDev`;
    
    api.request(NEWS_BLOG_API, (error, response, body) => {
        const { items } = JSON.parse(body);
        if(!items.length){
            p.play('Sorry, please try searching for tech new from a different source');
            return;
        }
        savedArticals = items;
        p.play({command: 'newTechNews', items});
        p.play(`Here are the (latest|recent) ${p.tech.value} news`);
    });
})

import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import ListItemText from '@mui/material/ListItemText';
import Select from '@mui/material/Select';
import type { SelectChangeEvent } from '@mui/material/Select';
import Checkbox from '@mui/material/Checkbox';
import type { SxProps } from '@mui/material';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

interface MultipleSelectProps {
  options: { id: string, name: string }[],
  value: string[],
  onChange: (arg1: string[]) => void,
  showSelectAllOption: boolean,
  label: string,
  name: string,
  formControlStyle?: SxProps,
}

export default function MultipleSelect({
  options,
  value,
  onChange,
  showSelectAllOption,
  label,
  formControlStyle,
  name,
}: MultipleSelectProps) {
  const handleChange = (event: SelectChangeEvent<typeof value>) => {
    const {
      target: { value },
    } = event;
    if (value.includes('select-all')) {
      if (value.length > 1) {
        onChange([]);
      } else {
        onChange(options.map(o => o.id));
      }
    } else {
      onChange(
        // On autofill we get a stringified value.
        typeof value === 'string' ? value.split(',') : value,
      );
    }
  };

  const renderValue = (selectedValue: string[]) => {
    const selectedItems = selectedValue.map((val) => {
      const option = options.find(option => option.id === val);
      return option?.name ?? ''
    })
    return selectedItems.join(', ');
  }

  const inputId = `multiple-checkbox-${name}`

  return (
    <div>
      <FormControl sx={formControlStyle}>
        <InputLabel id={inputId}>{label}</InputLabel>
        <Select
          labelId={inputId}
          multiple
          value={value}
          onChange={handleChange}
          input={<OutlinedInput label={label} />}
          renderValue={renderValue}
          MenuProps={MenuProps}
          name={name}
        >
          {showSelectAllOption && (
            <MenuItem key="select-all" value="select-all">
              <Checkbox
                checked={value.length == options.length}
                indeterminate={value.length > 0 && value.length !== options.length}
              />
              <ListItemText primary="Select All" />
            </MenuItem>
          )}
          {options.map((option) => (
            <MenuItem key={option.id} value={option.id}>
              <Checkbox checked={value.indexOf(option.id) > -1} />
              <ListItemText primary={option.name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}