opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-30 18:53:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update ChatView layout

Browse Source
This commit is contained in:
Steven
2023-03-16 21:29:19 +08:00
parent 5ff430fe34
commit 4ea6ce143f
12 changed files with 154 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/ChatView/Sidebar.tsx
View File

@ -4,6 +4,7 @@ import { User } from "../../types";
const Sidebar = () => {
const userStore = useUserStore();
const chatStore = useChatStore();
const currentChatUserId = chatStore.currentChat.userId;
const handleAssistantClick = (user: User) => {
for (const chat of chatStore.chatList) {
@ -16,13 +17,19 @@ const Sidebar = () => {
};
return (
<div className="w-full border-r p-2">
<h2>Assistant list</h2>
<div>
<div className="w-52 lg:w-64 h-full transition-all shrink-0 border-r p-2 sticky top-0">
<h2 className="pt-2 pb-4 w-full text-center">Assistant list</h2>
<div className="w-full mt-2 flex flex-col justify-start items-start">
{userStore.assistantList.map((assistant) => (
<p onClick={() => handleAssistantClick(assistant)} key={assistant.id}>
<div
className={`w-full py-2 px-3 rounded-md mb-2 cursor-pointer hover:opacity-80 hover:bg-gray-100 ${
currentChatUserId === assistant.id && "shadow bg-gray-100 font-medium"
}`}
onClick={() => handleAssistantClick(assistant)}
key={assistant.id}
>
{assistant.name}
</p>
</div>
))}
</div>
</div>