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

mvp

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-15 06:04:12 -06:00
parent e87136c4ec
commit 758a1215c2
5 changed files with 228 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Conversations.tsx
+39
View File
@@ -0,0 +1,39 @@
import { Conversation } from "@/types";
import { IconMessage, IconTrash } from "@tabler/icons-react";
import { FC } from "react";
interface Props {
conversations: Conversation[];
selectedConversation: Conversation;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
}
export const Conversations: FC<Props> = ({ conversations, selectedConversation, onSelectConversation, onDeleteConversation }) => {
return (
<div className="flex flex-col space-y-2">
{conversations.map((conversation, index) => (
<div
key={index}
className={`flex items-center justify-start w-[240px] h-[40px] px-2 text-sm rounded-lg hover:bg-neutral-700 cursor-pointer ${selectedConversation.id === conversation.id ? "bg-slate-600" : ""}`}
onClick={() => onSelectConversation(conversation)}
>
<IconMessage
className="mr-2 min-w-[20px]"
size={18}
/>
<div className="overflow-hidden whitespace-nowrap overflow-ellipsis pr-1">{conversation.messages[0] ? conversation.messages[0].content : "Empty conversation"}</div>
<IconTrash
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
onDeleteConversation(conversation);
}}
/>
</div>
))}
</div>
);
};
components/ModelSelect.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export const ModelSelect: FC<Props> = ({ model, onSelect }) => {
<div className="flex flex-col">
<label className="text-left mb-2 dark:text-neutral-400 text-neutral-700">Model</label>
<select
className="w-[300px] p-3 dark:text-white dark:bg-[#343541] border border-neutral-500 rounded-lg appearance-none focus:shadow-outline text-neutral-900"
className="w-[300px] p-3 dark:text-white dark:bg-[#343541] border border-neutral-500 rounded-lg appearance-none focus:shadow-outline text-neutral-900 cursor-pointer"
placeholder="Select a model"
value={model}
onChange={(e) => onSelect(e.target.value as OpenAIModel)}
components/Sidebar/Sidebar.tsx
+20 -3
View File
@@ -1,17 +1,27 @@
import { Conversation } from "@/types";
import { IconPlus } from "@tabler/icons-react";
import { FC } from "react";
import { Conversations } from "../Conversations";
import { SidebarSettings } from "./SidebarSettings";
interface Props {
conversations: Conversation[];
lightMode: "light" | "dark";
selectedConversation: Conversation;
onNewConversation: () => void;
onToggleLightMode: (mode: "light" | "dark") => void;
onSelectConversation: (conversation: Conversation) => void;
onDeleteConversation: (conversation: Conversation) => void;
}
export const Sidebar: FC<Props> = ({ lightMode, onToggleLightMode }) => {
export const Sidebar: FC<Props> = ({ conversations, lightMode, selectedConversation, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation }) => {
return (
<div className="flex flex-col bg-[#202123] min-w-[260px]">
<div className="flex items-center justify-center h-[60px]">
<button className="flex items-center w-[240px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700">
<button
className="flex items-center w-[240px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700"
onClick={onNewConversation}
>
<IconPlus
className="ml-4 mr-3"
size={16}
@@ -20,7 +30,14 @@ export const Sidebar: FC<Props> = ({ lightMode, onToggleLightMode }) => {
</button>
</div>
<div className="flex-1"></div>
<div className="flex-1 mx-auto pb-2 overflow-auto">
<Conversations
conversations={conversations}
selectedConversation={selectedConversation}
onSelectConversation={onSelectConversation}
onDeleteConversation={onDeleteConversation}
/>
</div>
<SidebarSettings
lightMode={lightMode}