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>
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
|
|
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
|
|
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
import { SidebarButton } from '../Sidebar/SidebarButton';
|
|
|
|
interface Props {
|
|
apiKey: string;
|
|
onApiKeyChange: (apiKey: string) => void;
|
|
}
|
|
|
|
export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
|
|
const { t } = useTranslation('sidebar');
|
|
const [isChanging, setIsChanging] = useState(false);
|
|
const [newKey, setNewKey] = useState(apiKey);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleUpdateKey(newKey);
|
|
}
|
|
};
|
|
|
|
const handleUpdateKey = (newKey: string) => {
|
|
onApiKeyChange(newKey.trim());
|
|
setIsChanging(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isChanging) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}, [isChanging]);
|
|
|
|
return isChanging ? (
|
|
<div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
|
|
<IconKey size={18} />
|
|
|
|
<input
|
|
ref={inputRef}
|
|
className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100"
|
|
type="password"
|
|
value={newKey}
|
|
onChange={(e) => setNewKey(e.target.value)}
|
|
onKeyDown={handleEnterDown}
|
|
placeholder={t('API Key') || 'API Key'}
|
|
/>
|
|
|
|
<div className="flex w-[40px]">
|
|
<IconCheck
|
|
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
|
size={18}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleUpdateKey(newKey);
|
|
}}
|
|
/>
|
|
|
|
<IconX
|
|
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
|
size={18}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsChanging(false);
|
|
setNewKey(apiKey);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<SidebarButton
|
|
text={t('OpenAI API Key')}
|
|
icon={<IconKey size={18} />}
|
|
onClick={() => setIsChanging(true)}
|
|
/>
|
|
);
|
|
};
|