opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-08-02 22:58:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement connection sidebar

Browse Source
This commit is contained in:
steven
2023-03-23 16:18:13 +08:00
parent eb978bd669
commit 39df26a08f
20 changed files with 445 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/ChatView/Header.tsx
View File

@ -1,14 +1,12 @@
import { Menu, Popover } from "@headlessui/react";
import Link from "next/link";
import { Menu } from "@headlessui/react";
import { toast } from "react-hot-toast";
import { getAssistantById, useChatStore, useMessageStore } from "@/store";
import { useChatStore, useMessageStore } from "@/store";
import Icon from "../Icon";
const Header = () => {
const chatStore = useChatStore();
const messageStore = useMessageStore();
const currentChat = chatStore.currentChat;
const assistant = getAssistantById(currentChat?.assistantId)!;
const handleClearMessage = () => {
messageStore.clearMessage((message) => message.chatId !== currentChat?.id);
@ -16,40 +14,14 @@ const Header = () => {
};
return (
<div className="sticky top-0 w-full flex flex-row justify-between items-center py-2 border-b rounded-t-lg bg-gray-100 bg-opacity-80 backdrop-blur">
<div className="sticky top-0 w-full flex flex-row justify-between items-center py-3 border-b bg-white shadow">
<div className="ml-4 relative flex justify-center">
<Menu>
<Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-white">
<Icon.Io.IoIosMenu className="text-gray-600 w-full h-auto" />
</Menu.Button>
<Menu.Items className="absolute left-0 top-full mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 outline-none p-1 space-y-1">
<Menu.Item>
<Link className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100" href="/about">
<Icon.Io.IoMdInformationCircleOutline className="text-gray-600 w-5 h-auto mr-1" />
About
</Link>
</Menu.Item>
<Menu.Item>
<a
className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100"
href="https://github.com/bytebase/sqlchat"
target="_blank"
>
<Icon.Io.IoLogoGithub className="text-gray-600 w-5 h-auto mr-1" /> GitHub
</a>
</Menu.Item>
</Menu.Items>
</Menu>
<Icon.Io.IoIosMenu className="text-gray-600 w-5 h-auto block sm:hidden" />
</div>
<Popover className="relative w-auto">
<Popover.Button className="outline-none">{assistant.name}</Popover.Button>
<Popover.Panel className="absolute z-10 left-1/2 mt-1 -translate-x-1/2 bg-white shadow-lg rounded-lg outline-none border flex flex-col justify-start items-start w-72 p-4">
<p className="w-full text-left">{assistant.description}</p>
</Popover.Panel>
</Popover>
<span className="w-auto">{currentChat?.title || "SQL Chat"}</span>
<div className="mr-4 relative flex justify-center">
<Menu>
<Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-white">
<Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-gray-100">
<Icon.Io.IoIosMore className="text-gray-600 w-full h-auto" />
</Menu.Button>
<Menu.Items className="absolute right-0 top-full mt-1 w-32 origin-top-right rounded-lg bg-white shadow-lg outline-none ring-1 ring-black ring-opacity-5 p-1 space-y-1">

4
components/ChatView/MessageTextarea.tsx
View File

@ -67,7 +67,7 @@ const MessageTextarea = (props: Props) => {
<div className="w-full h-auto flex flex-row justify-between items-end border rounded-lg mb-2 px-2 py-1 relative shadow bg-white">
<TextareaAutosize
ref={textareaRef}
className="w-full h-full outline-none border-none bg-transparent leading-6 py-1 px-2 resize-none hide-scrollbar"
className="w-full h-full outline-none border-none bg-transparent leading-8 py-1 px-2 resize-none hide-scrollbar"
placeholder="Type a message..."
rows={1}
minRows={1}
@ -78,7 +78,7 @@ const MessageTextarea = (props: Props) => {
onKeyDown={handleKeyDown}
/>
<button
className="w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
className="w-8 p-1 -translate-y-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
disabled={disabled}
onClick={handleSend}
>

10
components/ChatView/index.tsx
View File

@ -1,6 +1,6 @@
import axios from "axios";
import { useEffect, useRef, useState } from "react";
import { getAssistantById, getPromptOfAssistant, useChatStore, useMessageStore } from "@/store";
import { getAssistantById, getPromptGeneratorOfAssistant, useChatStore, useMessageStore, useConnectionStore } from "@/store";
import { CreatorRole } from "@/types";
import { generateUUID } from "@/utils";
import Icon from "../Icon";
@ -9,6 +9,7 @@ import MessageView from "./MessageView";
import MessageTextarea from "./MessageTextarea";
const ChatView = () => {
const connectionStore = useConnectionStore();
const chatStore = useChatStore();
const messageStore = useMessageStore();
const [isRequesting, setIsRequesting] = useState<boolean>(false);
@ -35,7 +36,12 @@ const ChatView = () => {
setIsRequesting(true);
const messageList = messageStore.getState().messageList.filter((message) => message.chatId === currentChat.id);
const prompt = getPromptOfAssistant(getAssistantById(currentChat.assistantId)!);
let prompt = "";
if (connectionStore.currentConnectionCtx?.database) {
const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!);
prompt = promptGenerator(tables.map((table) => table.structure).join("/n"));
}
const { data } = await axios.post<string>("/api/chat", {
messages: [
{