schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prompts (#229)

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-27 09:38:56 -06:00
committed by GitHub
parent 2269403806
commit 34c79c0d66
51 changed files with 1744 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+42 -12
View File
@@ -1,14 +1,20 @@
import {
Conversation,
ErrorMessage,
KeyValuePair,
Message,
OpenAIModel,
} from '@/types';
import { Conversation, Message } from '@/types/chat';
import { KeyValuePair } from '@/types/data';
import { ErrorMessage } from '@/types/error';
import { OpenAIModel } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import { throttle } from '@/utils';
import { IconClearAll, IconKey, IconSettings } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, memo, MutableRefObject, useEffect, useRef, useState } from 'react';
import {
FC,
memo,
MutableRefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { Spinner } from '../Global/Spinner';
import { ChatInput } from './ChatInput';
import { ChatLoader } from './ChatLoader';
@@ -24,8 +30,8 @@ interface Props {
serverSideApiKeyIsSet: boolean;
messageIsStreaming: boolean;
modelError: ErrorMessage | null;
messageError: boolean;
loading: boolean;
prompts: Prompt[];
onSend: (message: Message, deleteCount?: number) => void;
onUpdateConversation: (
conversation: Conversation,
@@ -43,8 +49,8 @@ export const Chat: FC<Props> = memo(
serverSideApiKeyIsSet,
messageIsStreaming,
modelError,
messageError,
loading,
prompts,
onSend,
onUpdateConversation,
onEditMessage,
@@ -59,6 +65,27 @@ export const Chat: FC<Props> = memo(
const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const scrollToBottom = useCallback(() => {
if (autoScrollEnabled) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
textareaRef.current?.focus();
}
}, [autoScrollEnabled]);
const handleScroll = () => {
if (chatContainerRef.current) {
const { scrollTop, scrollHeight, clientHeight } =
chatContainerRef.current;
const bottomTolerance = 30;
if (scrollTop + clientHeight < scrollHeight - bottomTolerance) {
setAutoScrollEnabled(false);
} else {
setAutoScrollEnabled(true);
}
}
};
const handleSettings = () => {
setShowSettings(!showSettings);
};
@@ -174,6 +201,7 @@ export const Chat: FC<Props> = memo(
<SystemPrompt
conversation={conversation}
prompts={prompts}
onChangePrompt={(prompt) =>
onUpdateConversation(conversation, {
key: 'prompt',
@@ -201,8 +229,8 @@ export const Chat: FC<Props> = memo(
/>
</div>
{showSettings && (
<div className="flex flex-col space-y-10 md:max-w-xl md:gap-6 md:py-3 md:pt-6 md:mx-auto lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="flex h-full flex-col space-y-4 border-b md:rounded-lg md:border border-neutral-200 p-4 dark:border-neutral-600">
<div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="flex h-full flex-col space-y-4 border-b border-neutral-200 p-4 dark:border-neutral-600 md:rounded-lg md:border">
<ModelSelect
model={conversation.model}
models={models}
@@ -241,7 +269,9 @@ export const Chat: FC<Props> = memo(
textareaRef={textareaRef}
messageIsStreaming={messageIsStreaming}
conversationIsEmpty={conversation.messages.length === 0}
messages={conversation.messages}
model={conversation.model}
prompts={prompts}
onSend={(message) => {
setCurrentMessage(message);
onSend(message);
components/Chat/ChatInput.tsx
+170 -16
View File
@@ -1,18 +1,26 @@
import { Message, OpenAIModel, OpenAIModelID } from '@/types';
import { Message } from '@/types/chat';
import { OpenAIModel, OpenAIModelID } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import {
FC,
KeyboardEvent,
MutableRefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { PromptList } from './PromptList';
import { VariableModal } from './VariableModal';
interface Props {
messageIsStreaming: boolean;
model: OpenAIModel;
conversationIsEmpty: boolean;
messages: Message[];
prompts: Prompt[];
onSend: (message: Message) => void;
onRegenerate: () => void;
stopConversationRef: MutableRefObject<boolean>;
@@ -23,14 +31,28 @@ export const ChatInput: FC<Props> = ({
messageIsStreaming,
model,
conversationIsEmpty,
messages,
prompts,
onSend,
onRegenerate,
stopConversationRef,
textareaRef,
}) => {
const { t } = useTranslation('chat');
const [content, setContent] = useState<string>();
const [isTyping, setIsTyping] = useState<boolean>(false);
const [showPromptList, setShowPromptList] = useState(false);
const [activePromptIndex, setActivePromptIndex] = useState(0);
const [promptInputValue, setPromptInputValue] = useState('');
const [variables, setVariables] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const promptListRef = useRef<HTMLUListElement | null>(null);
const filteredPrompts = prompts.filter((prompt) =>
prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
@@ -47,6 +69,7 @@ export const ChatInput: FC<Props> = ({
}
setContent(value);
updatePromptListVisibility(value);
};
const handleSend = () => {
@@ -67,6 +90,13 @@ export const ChatInput: FC<Props> = ({
}
};
const handleStopConversation = () => {
stopConversationRef.current = true;
setTimeout(() => {
stopConversationRef.current = false;
}, 1000);
};
const isMobile = () => {
const userAgent =
typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
@@ -75,15 +105,106 @@ export const ChatInput: FC<Props> = ({
return mobileRegex.test(userAgent);
};
const handleInitModal = () => {
const selectedPrompt = filteredPrompts[activePromptIndex];
setContent((prevContent) => {
const newContent = prevContent?.replace(/\/\w*$/, selectedPrompt.content);
return newContent;
});
handlePromptSelect(selectedPrompt);
setShowPromptList(false);
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (!isTyping) {
if (e.key === 'Enter' && !e.shiftKey && !isMobile()) {
if (showPromptList) {
if (e.key === 'ArrowDown') {
e.preventDefault();
handleSend();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex > 0 ? prevIndex - 1 : prevIndex,
);
} else if (e.key === 'Tab') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
);
} else if (e.key === 'Enter') {
e.preventDefault();
handleInitModal();
} else if (e.key === 'Escape') {
e.preventDefault();
setShowPromptList(false);
} else {
setActivePromptIndex(0);
}
} else if (e.key === 'Enter' && !isMobile() && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};
const parseVariables = (content: string) => {
const regex = /{{(.*?)}}/g;
const foundVariables = [];
let match;
while ((match = regex.exec(content)) !== null) {
foundVariables.push(match[1]);
}
return foundVariables;
};
const updatePromptListVisibility = useCallback((text: string) => {
const match = text.match(/\/\w*$/);
if (match) {
setShowPromptList(true);
setPromptInputValue(match[0].slice(1));
} else {
setShowPromptList(false);
setPromptInputValue('');
}
}, []);
const handlePromptSelect = (prompt: Prompt) => {
const parsedVariables = parseVariables(prompt.content);
setVariables(parsedVariables);
if (parsedVariables.length > 0) {
setIsModalVisible(true);
} else {
setContent((prevContent) => {
const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content);
return updatedContent;
});
updatePromptListVisibility(prompt.content);
}
};
const handleSubmit = (updatedVariables: string[]) => {
const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => {
const index = variables.indexOf(variable);
return updatedVariables[index];
});
setContent(newContent);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
};
useEffect(() => {
if (promptListRef.current) {
promptListRef.current.scrollTop = activePromptIndex * 30;
}
}, [activePromptIndex]);
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
@@ -94,19 +215,29 @@ export const ChatInput: FC<Props> = ({
}
}, [content]);
function handleStopConversation() {
stopConversationRef.current = true;
setTimeout(() => {
stopConversationRef.current = false;
}, 1000);
}
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (
promptListRef.current &&
!promptListRef.current.contains(e.target as Node)
) {
setShowPromptList(false);
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="absolute bottom-0 left-0 w-full border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-[#343541] dark:to-[#343541] md:pt-2">
<div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
{messageIsStreaming && (
<button
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
className="absolute top-2 left-0 right-0 mx-auto mt-2 w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
onClick={handleStopConversation}
>
<IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
@@ -116,7 +247,7 @@ export const ChatInput: FC<Props> = ({
{!messageIsStreaming && !conversationIsEmpty && (
<button
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
className="absolute left-0 right-0 mx-auto mt-2 w-fit rounded border border-neutral-200 bg-white py-2 px-4 text-black hover:opacity-50 dark:border-neutral-600 dark:bg-[#343541] dark:text-white md:top-0"
onClick={onRegenerate}
>
<IconRepeat size={16} className="mb-[2px] inline-block" />{' '}
@@ -124,10 +255,10 @@ export const ChatInput: FC<Props> = ({
</button>
)}
<div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
<div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4 md:py-3 md:pl-4">
<textarea
ref={textareaRef}
className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 pl-2 text-black outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:text-white md:pl-0"
className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-8 pl-2 text-black outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:text-white md:pl-0"
style={{
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
@@ -138,7 +269,9 @@ export const ChatInput: FC<Props> = ({
: 'hidden'
}`,
}}
placeholder={t('Type a message...') || ''}
placeholder={
t('Type a message or type "/" to select a prompt...') || ''
}
value={content}
rows={1}
onCompositionStart={() => setIsTyping(true)}
@@ -153,9 +286,30 @@ export const ChatInput: FC<Props> = ({
>
<IconSend size={16} className="opacity-60" />
</button>
{showPromptList && prompts.length > 0 && (
<div className="absolute bottom-12 w-full">
<PromptList
activePromptIndex={activePromptIndex}
prompts={filteredPrompts}
onSelect={handleInitModal}
onMouseOver={setActivePromptIndex}
promptListRef={promptListRef}
/>
</div>
)}
{isModalVisible && (
<VariableModal
prompt={prompts[activePromptIndex]}
variables={variables}
onSubmit={handleSubmit}
onClose={() => setIsModalVisible(false)}
/>
)}
</div>
</div>
<div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
<div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
<a
href="https://github.com/mckaywrigley/chatbot-ui"
target="_blank"
components/Chat/ChatMessage.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import { Message } from '@/types';
import { Message } from '@/types/chat';
import { IconEdit } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { FC, useEffect, useRef, useState, memo } from 'react';
import { FC, memo, useEffect, useRef, useState } from 'react';
import rehypeMathjax from 'rehype-mathjax';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
@@ -73,7 +73,7 @@ export const ChatMessage: FC<Props> = memo(
return (
<div
className={`group ${
className={`group px-4 ${
message.role === 'assistant'
? 'border-b border-black/10 bg-gray-50 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100'
: 'border-b border-black/10 bg-white text-gray-800 dark:border-gray-900/50 dark:bg-[#343541] dark:text-gray-100'
@@ -138,7 +138,7 @@ export const ChatMessage: FC<Props> = memo(
className={`absolute ${
window.innerWidth < 640
? 'right-3 bottom-1'
: 'right-[-20px] top-[26px]'
: 'right-0 top-[26px]'
}`}
>
<IconEdit
components/Chat/CopyButton.tsx
+9 -8
View File
@@ -1,5 +1,5 @@
import { IconCheck, IconCopy } from "@tabler/icons-react";
import { FC } from "react";
import { IconCheck, IconCopy } from '@tabler/icons-react';
import { FC } from 'react';
type Props = {
messagedCopied: boolean;
@@ -7,16 +7,17 @@ type Props = {
};
export const CopyButton: FC<Props> = ({ messagedCopied, copyOnClick }) => (
<button className={`absolute ${window.innerWidth < 640 ? "right-3 bottom-1" : "right-[-20px] top-[26px] m-0"}`}>
<button
className={`absolute ${
window.innerWidth < 640 ? 'right-3 bottom-1' : 'right-0 top-[26px] m-0'
}`}
>
{messagedCopied ? (
<IconCheck
size={20}
className="text-green-500 dark:text-green-400"
/>
<IconCheck size={20} className="text-green-500 dark:text-green-400" />
) : (
<IconCopy
size={20}
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
onClick={copyOnClick}
/>
)}
components/Chat/ErrorMessageDiv.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { ErrorMessage } from '@/types';
import { ErrorMessage } from '@/types/error';
import { IconCircleX } from '@tabler/icons-react';
import { FC } from 'react';
@@ -19,7 +19,7 @@ export const ErrorMessageDiv: FC<Props> = ({ error }) => {
{line}{' '}
</div>
))}
<div className="text-xs dark:text-red-400 opacity-50 mt-4">
<div className="mt-4 text-xs opacity-50 dark:text-red-400">
{error.code ? <i>Code: {error.code}</i> : ''}
</div>
</div>
components/Chat/ModelSelect.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { OpenAIModel } from '@/types';
import { FC } from 'react';
import { OpenAIModel } from '@/types/openai';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';
interface Props {
model: OpenAIModel;
components/Chat/PromptList.tsx
+50
View File
@@ -0,0 +1,50 @@
import { Prompt } from '@/types/prompt';
import { FC, MutableRefObject } from 'react';
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 w-full 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)]"
style={{
width: 'calc(100% - 48px)',
bottom: '100%',
marginBottom: '4px',
maxHeight: '200px',
}}
>
{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>
);
};
components/Chat/Regenerate.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { IconRefresh } from '@tabler/icons-react';
import { FC } from 'react';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';
interface Props {
onRegenerate: () => void;
components/Chat/SystemPrompt.tsx
+175 -7
View File
@@ -1,35 +1,162 @@
import { Conversation } from '@/types';
import { Conversation } from '@/types/chat';
import { OpenAIModelID } from '@/types/openai';
import { Prompt } from '@/types/prompt';
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
import { FC, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
import {
FC,
KeyboardEvent,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { PromptList } from './PromptList';
import { VariableModal } from './VariableModal';
interface Props {
conversation: Conversation;
prompts: Prompt[];
onChangePrompt: (prompt: string) => void;
}
export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
export const SystemPrompt: FC<Props> = ({
conversation,
prompts,
onChangePrompt,
}) => {
const { t } = useTranslation('chat');
const [value, setValue] = useState<string>('');
const [activePromptIndex, setActivePromptIndex] = useState(0);
const [showPromptList, setShowPromptList] = useState(false);
const [promptInputValue, setPromptInputValue] = useState('');
const [variables, setVariables] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const promptListRef = useRef<HTMLUListElement | null>(null);
const filteredPrompts = prompts.filter((prompt) =>
prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()),
);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const maxLength = 4000;
const maxLength =
conversation.model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
if (value.length > maxLength) {
alert(t(`Prompt limit is {{maxLength}} characters`, { maxLength }));
alert(
t(
`Prompt limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`,
{ maxLength, valueLength: value.length },
),
);
return;
}
setValue(value);
updatePromptListVisibility(value);
if (value.length > 0) {
onChangePrompt(value);
}
};
const handleInitModal = () => {
const selectedPrompt = filteredPrompts[activePromptIndex];
setValue((prevVal) => {
const newContent = prevVal?.replace(/\/\w*$/, selectedPrompt.content);
return newContent;
});
handlePromptSelect(selectedPrompt);
setShowPromptList(false);
};
const parseVariables = (content: string) => {
const regex = /{{(.*?)}}/g;
const foundVariables = [];
let match;
while ((match = regex.exec(content)) !== null) {
foundVariables.push(match[1]);
}
return foundVariables;
};
const updatePromptListVisibility = useCallback((text: string) => {
const match = text.match(/\/\w*$/);
if (match) {
setShowPromptList(true);
setPromptInputValue(match[0].slice(1));
} else {
setShowPromptList(false);
setPromptInputValue('');
}
}, []);
const handlePromptSelect = (prompt: Prompt) => {
const parsedVariables = parseVariables(prompt.content);
setVariables(parsedVariables);
if (parsedVariables.length > 0) {
setIsModalVisible(true);
} else {
const updatedContent = value?.replace(/\/\w*$/, prompt.content);
setValue(updatedContent);
onChangePrompt(updatedContent);
updatePromptListVisibility(prompt.content);
}
};
const handleSubmit = (updatedVariables: string[]) => {
const newContent = value?.replace(/{{(.*?)}}/g, (match, variable) => {
const index = variables.indexOf(variable);
return updatedVariables[index];
});
setValue(newContent);
onChangePrompt(newContent);
if (textareaRef && textareaRef.current) {
textareaRef.current.focus();
}
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (showPromptList) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex,
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex > 0 ? prevIndex - 1 : prevIndex,
);
} else if (e.key === 'Tab') {
e.preventDefault();
setActivePromptIndex((prevIndex) =>
prevIndex < prompts.length - 1 ? prevIndex + 1 : 0,
);
} else if (e.key === 'Enter') {
e.preventDefault();
handleInitModal();
} else if (e.key === 'Escape') {
e.preventDefault();
setShowPromptList(false);
} else {
setActivePromptIndex(0);
}
}
};
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit';
@@ -45,6 +172,23 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
}
}, [conversation]);
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (
promptListRef.current &&
!promptListRef.current.contains(e.target as Node)
) {
setShowPromptList(false);
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, []);
return (
<div className="flex flex-col">
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
@@ -52,7 +196,7 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
</label>
<textarea
ref={textareaRef}
className="w-full rounded-lg border border-neutral-200 px-4 py-3 text-neutral-900 focus:outline-none bg-transparent dark:border-neutral-600 dark:text-neutral-100"
className="w-full rounded-lg border border-neutral-200 bg-transparent px-4 py-3 text-neutral-900 focus:outline-none dark:border-neutral-600 dark:text-neutral-100"
style={{
resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`,
@@ -63,11 +207,35 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
: 'hidden'
}`,
}}
placeholder={t('Enter a prompt') || ''}
placeholder={
t(`Enter a prompt or type "/" to select a prompt...`) || ''
}
value={t(value) || ''}
rows={1}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
{showPromptList && prompts.length > 0 && (
<div>
<PromptList
activePromptIndex={activePromptIndex}
prompts={filteredPrompts}
onSelect={handleInitModal}
onMouseOver={setActivePromptIndex}
promptListRef={promptListRef}
/>
</div>
)}
{isModalVisible && (
<VariableModal
prompt={prompts[activePromptIndex]}
variables={variables}
onSubmit={handleSubmit}
onClose={() => setIsModalVisible(false)}
/>
)}
</div>
);
};
components/Chat/VariableModal.tsx
+123
View File
@@ -0,0 +1,123 @@
import { Prompt } from '@/types/prompt';
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
interface Props {
prompt: Prompt;
variables: string[];
onSubmit: (updatedVariables: string[]) => void;
onClose: () => void;
}
export const VariableModal: FC<Props> = ({
prompt,
variables,
onSubmit,
onClose,
}) => {
const [updatedVariables, setUpdatedVariables] = useState<
{ key: string; value: string }[]
>(
variables
.map((variable) => ({ key: variable, value: '' }))
.filter(
(item, index, array) =>
array.findIndex((t) => t.key === item.key) === index,
),
);
const modalRef = useRef<HTMLDivElement>(null);
const nameInputRef = useRef<HTMLTextAreaElement>(null);
const handleChange = (index: number, value: string) => {
setUpdatedVariables((prev) => {
const updated = [...prev];
updated[index].value = value;
return updated;
});
};
const handleSubmit = () => {
if (updatedVariables.some((variable) => variable.value === '')) {
alert('Please fill out all variables');
return;
}
onSubmit(updatedVariables.map((variable) => variable.value));
onClose();
};
const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit();
} else if (e.key === 'Escape') {
onClose();
}
};
useEffect(() => {
const handleOutsideClick = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
onClose();
}
};
window.addEventListener('click', handleOutsideClick);
return () => {
window.removeEventListener('click', handleOutsideClick);
};
}, [onClose]);
useEffect(() => {
if (nameInputRef.current) {
nameInputRef.current.focus();
}
}, []);
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleKeyDown}
>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">
{prompt.name}
</div>
<div className="mb-4 text-sm italic text-black dark:text-neutral-200">
{prompt.description}
</div>
{updatedVariables.map((variable, index) => (
<div className="mb-4" key={index}>
<div className="mb-2 text-sm font-bold text-neutral-200">
{variable.key}
</div>
<textarea
ref={index === 0 ? nameInputRef : undefined}
className="mt-1 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
style={{ resize: 'none' }}
placeholder={`Enter a value for ${variable.key}...`}
value={variable.value}
onChange={(e) => handleChange(index, e.target.value)}
rows={3}
/>
</div>
))}
<button
className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={handleSubmit}
>
Submit
</button>
</div>
</div>
);
};