Mckay Wrigley
6500db9c1c
* move index to home folder, create state and context files and barrell folder * Sanity Check Commit: reducer added to home.tsx manual QA all working * WIP: promptBar * fix missing json parse on folders and prompts * split context and add promptbar context * add context to nested prompt componets and componetize Folder componet * remove log * Create buttons folder and componetize sidebar action button * tidy up prompt handlers * componetized sidebar * added back chatbar componet to left side sidebar * monster commit: Componetized the common code between chatbar and promptbar into new componet Sidebar and added context to both bars * add useFetch service * added prettier import sort to keep imports ordered and easier to indentify * added react query and useFetch to work with RQ * added apiService, errorService and reactQuery * add callback and tidy up error service * refactor chat and child componets to useContext * fix extra calls and bad calls to mel endpoint * minor import cleanup --------- Co-authored-by: jc.durbin <jc.durbin@ardanis.com>
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { FC, useEffect, useRef } from 'react';
|
|
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
import { Plugin, PluginList } from '@/types/plugin';
|
|
|
|
interface Props {
|
|
plugin: Plugin | null;
|
|
onPluginChange: (plugin: Plugin) => void;
|
|
}
|
|
|
|
export const PluginSelect: FC<Props> = ({ plugin, onPluginChange }) => {
|
|
const { t } = useTranslation('chat');
|
|
|
|
const selectRef = useRef<HTMLSelectElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (selectRef.current) {
|
|
selectRef.current.focus();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="w-full rounded-lg border border-neutral-200 bg-transparent pr-2 text-neutral-900 dark:border-neutral-600 dark:text-white">
|
|
<select
|
|
ref={selectRef}
|
|
className="w-full cursor-pointer bg-transparent p-2"
|
|
placeholder={t('Select a plugin') || ''}
|
|
value={plugin?.id || ''}
|
|
onChange={(e) => {
|
|
onPluginChange(
|
|
PluginList.find(
|
|
(plugin) => plugin.id === e.target.value,
|
|
) as Plugin,
|
|
);
|
|
}}
|
|
>
|
|
<option
|
|
key="none"
|
|
value=""
|
|
className="dark:bg-[#343541] dark:text-white"
|
|
>
|
|
Select Plugin
|
|
</option>
|
|
|
|
{PluginList.map((plugin) => (
|
|
<option
|
|
key={plugin.id}
|
|
value={plugin.id}
|
|
className="dark:bg-[#343541] dark:text-white"
|
|
>
|
|
{plugin.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|