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>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { FC, MutableRefObject } from 'react';
|
|
|
|
import { Prompt } from '@/types/prompt';
|
|
|
|
interface Props {
|
|
prompts: Prompt[];
|
|
activePromptIndex: number;
|
|
onSelect: () => void;
|
|
onMouseOver: (index: number) => void;
|
|
promptListRef: MutableRefObject<HTMLUListElement | null>;
|
|
}
|
|
|
|
export const PromptList: FC<Props> = ({
|
|
prompts,
|
|
activePromptIndex,
|
|
onSelect,
|
|
onMouseOver,
|
|
promptListRef,
|
|
}) => {
|
|
return (
|
|
<ul
|
|
ref={promptListRef}
|
|
className="z-10 max-h-52 w-full overflow-scroll rounded border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-neutral-500 dark:bg-[#343541] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
|
|
>
|
|
{prompts.map((prompt, index) => (
|
|
<li
|
|
key={prompt.id}
|
|
className={`${
|
|
index === activePromptIndex
|
|
? 'bg-gray-200 dark:bg-[#202123] dark:text-black'
|
|
: ''
|
|
} cursor-pointer px-3 py-2 text-sm text-black dark:text-white`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onSelect();
|
|
}}
|
|
onMouseEnter={() => onMouseOver(index)}
|
|
>
|
|
{prompt.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|