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

add rename and delete improvements

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-18 03:57:15 -06:00
parent b6d5576227
commit a0056460ab
6 changed files with 160 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/Chat.tsx
+18 -18
View File
@@ -26,21 +26,21 @@ export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, o
}, [messages]);
return (
<div className="h-full flex flex-col">
{messages.length === 0 ? (
<>
<div className="flex justify-center pt-8">
<ModelSelect
model={model}
onSelect={onSelect}
/>
</div>
<div className="h-full w-full flex flex-col dark:bg-[#343541]">
<div className="flex-1 overflow-y-auto">
{messages.length === 0 ? (
<>
<div className="flex justify-center pt-8 overflow-auto">
<ModelSelect
model={model}
onSelect={onSelect}
/>
</div>
<div className="flex-1 text-4xl text-center text-neutral-300 pt-[280px]">Chatbot UI Pro</div>
</>
) : (
<>
<div className="flex-1 overflow-auto">
<div className="flex-1 text-4xl text-center text-neutral-300 pt-[280px]">Chatbot UI Pro</div>
</>
) : (
<>
<div className="text-center py-3 dark:bg-[#444654] dark:text-neutral-300 text-neutral-500 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
{messages.map((message, index) => (
@@ -53,11 +53,11 @@ export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, o
))}
{loading && <ChatLoader />}
<div ref={messagesEndRef} />
</div>
</>
)}
</>
)}
</div>
<div className="h-[140px] w-[800px] mx-auto">
<div className="h-[140px] w-[300px] sm:w-[400px] md:w-[500px] lg:w-[700px] xl:w-[800px] mx-auto">
<ChatInput onSend={onSend} />
</div>
</div>
components/Chat/ChatLoader.tsx
+3 -3
View File
@@ -6,11 +6,11 @@ interface Props {}
export const ChatLoader: FC<Props> = () => {
return (
<div
className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
className={`flex justify-center py-[30px] whitespace-pre-wrap dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
style={{ overflowWrap: "anywhere" }}
>
<div className="w-[650px] flex">
<div className="mr-4 font-bold min-w-[30px]">AI:</div>
<div className="w-full px-4 sm:px-0 sm:w-2/3 md:w-1/2 flex">
<div className="mr-4 font-bold min-w-[40px]">AI:</div>
<IconDots className="animate-pulse" />
</div>
</div>
components/Chat/ChatMessage.tsx
+2 -2
View File
@@ -11,10 +11,10 @@ interface Props {
export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
return (
<div
className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
className={`flex justify-center py-[30px] whitespace-pre-wrap ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
style={{ overflowWrap: "anywhere" }}
>
<div className="w-[650px] flex align-middle">
<div className="w-full px-4 sm:px-0 sm:w-2/3 md:w-1/2 flex">
<div className="mr-4 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
<div className="prose dark:prose-invert">