chore: rename to sqlchat

README.md

@@ -1,3 +1,3 @@
-# ChatDBA
+# SQL Chat
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbytebase%2Fchatdba&env=OPENAI_API_KEY)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbytebase%2Fsqlchat&env=OPENAI_API_KEY)

components/ChatView/Header.tsx

@@ -16,13 +16,13 @@ const Header = () => {
   };
 
   return (
-    <div className="sticky top-0 w-full flex flex-row justify-between items-center py-2 border-b bg-gray-100 bg-opacity-80 backdrop-blur">
+    <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="ml-4 relative flex justify-center">
         <Menu>
-          <Menu.Button>
+          <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-8 h-auto p-1 rounded-md cursor-pointer 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 p-1 space-y-1">
+          <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="/">
                 <Icon.Io.IoMdHome className="text-gray-600 w-5 h-auto mr-1" />
@@ -31,7 +31,7 @@ const Header = () => {
             </Menu.Item>
             <Menu.Item>
               <a
-                href="https://github.com/bytebase/chatdba"
+                href="https://github.com/bytebase/sqlchat"
                 target="_blank"
                 className="w-full p-2 rounded-lg flex flex-row justify-start items-center hover:bg-gray-100"
               >
@@ -42,17 +42,17 @@ const Header = () => {
         </Menu>
       </div>
       <Popover className="relative w-auto">
-        <Popover.Button>{assistant.name}</Popover.Button>
+        <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 border flex flex-col justify-start items-start w-72 p-4">
+        <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>
       <div className="mr-4 relative flex justify-center">
         <Menu>
-          <Menu.Button>
+          <Menu.Button className="w-8 h-auto p-1 cursor-pointer outline-none rounded-md hover:shadow hover:bg-white">
-            <Icon.Io.IoIosMore className="text-gray-600 w-8 h-auto p-1 rounded-md cursor-pointer hover:shadow hover:bg-white" />
+            <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 ring-1 ring-black ring-opacity-5 p-1 space-y-1">
+          <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">
             <Menu.Item>
               <div
                 className="w-full p-2 rounded-lg flex flex-row justify-start items-center cursor-pointer hover:bg-gray-100"

components/Empty.tsx

@@ -0,0 +1,9 @@
+interface Props {
+  content?: string;
+}
+
+const Empty = (props: Props) => {
+  return <div className="w-full flex flex-col justify-center items-center"></div>;
+};
+
+export default Empty;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "chatdba",
+  "name": "sqlchat",
   "private": false,
   "scripts": {
     "dev": "next dev",
@@ -12,6 +12,7 @@
     "axios": "^1.3.4",
     "csstype": "^3.1.1",
     "highlight.js": "^11.7.0",
+    "lodash-es": "^4.17.21",
     "marked": "^4.2.12",
     "next": "^13.2.4",
     "openai": "^3.0.0",
@@ -25,6 +26,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
+    "@types/lodash-es": "^4.17.7",
     "@types/marked": "^4.0.8",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",

pages/chat.tsx

@@ -7,7 +7,7 @@ const ChatPage: NextPage = () => {
   return (
     <div>
       <Head>
-        <title>ChatDBA</title>
+        <title>SQL Chat</title>
         <meta name="description" content="" />
         <link rel="icon" href="/favicon.ico" />
       </Head>

pages/index.tsx

@@ -8,17 +8,17 @@ const HomePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>ChatDBA</title>
+        <title>SQL Chat</title>
         <meta name="description" content="" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <main className="w-full h-full flex flex-col items-center justify-center">
         <div className="flex flex-col items-center justify-center px-4 py-16">
-          <h1 className="text-5xl font-extrabold text-gray-800 sm:text-6xl">ChatDBA</h1>
+          <h1 className="text-5xl font-extrabold text-gray-800 sm:text-6xl">SQL Chat</h1>
           <div className="grid grid-cols-1 mt-8">
             <Link
-              className="flex max-w-xs flex-row justify-center items-center rounded-xl bg-gray-700 p-4 px-6 text-white shadow hover:opacity-80"
+              className="flex max-w-xs flex-row justify-center items-center rounded-xl bg-indigo-600 p-4 px-6 text-white shadow-lg hover:opacity-80"
               href="/chat"
             >
               <Icon.Io.IoIosChatbubbles className="w-6 h-auto mr-2" />

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@headlessui/react': ^1.7.13
   '@tailwindcss/typography': ^0.5.9
+  '@types/lodash-es': ^4.17.7
   '@types/marked': ^4.0.8
   '@types/node': ^18.11.18
   '@types/react': ^18.0.26
@@ -14,6 +15,7 @@ specifiers:
   eslint: 8.20.0
   eslint-config-next: 12.2.3
   highlight.js: ^11.7.0
+  lodash-es: ^4.17.21
   marked: ^4.2.12
   next: ^13.2.4
   openai: ^3.0.0
@@ -34,6 +36,7 @@ dependencies:
   axios: 1.3.4
   csstype: 3.1.1
   highlight.js: 11.7.0
+  lodash-es: 4.17.21
   marked: 4.2.12
   next: 13.2.4_biqbaboplfbrettd7655fr4n2y
   openai: 3.2.1
@@ -47,6 +50,7 @@ dependencies:
 
 devDependencies:
   '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.7
+  '@types/lodash-es': 4.17.7
   '@types/marked': 4.0.8
   '@types/node': 18.15.3
   '@types/react': 18.0.28
@@ -284,6 +288,16 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/lodash-es/4.17.7:
+    resolution: {integrity: sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: true
+
+  /@types/lodash/4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: true
+
   /@types/marked/4.0.8:
     resolution: {integrity: sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==}
     dev: true
@@ -1675,6 +1689,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.castarray/4.4.0:
     resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
     dev: true

store/assistant.ts

@@ -1,11 +1,12 @@
+import { first } from "lodash-es";
 import { Id, User, UserRole } from "../types";
 
 // Assistant is a special user.
 export const assistantList: User[] = [
   {
-    id: "assistant-dba",
+    id: "sql-assistant",
-    name: "ChatDBA",
+    name: "SQL Chat",
-    description: "🤖️ I am a chatbot that can help you with database administration.",
+    description: "🤖️ I'm an expert in SQL. I can answer your questions about databases and SQL.",
     avatar: "",
     role: UserRole.Assistant,
   },
@@ -13,13 +14,13 @@ export const assistantList: User[] = [
 
 export const getAssistantById = (id: Id) => {
   const user = assistantList.find((user) => user.id === id);
-  return user || undefined;
+  return user || (first(assistantList) as User);
 };
 
 // getPromptOfAssistant define the special prompt for each assistant.
 export const getPromptOfAssistant = (assistant: User) => {
-  if (assistant.id === "assistant-dba") {
+  if (assistant.id === "sql-assistant") {
-    return `Remember that you are a DBA who is well versed in various databases. And you know everything about databases. You will answer some questions about databases.`;
+    return `Remember that you are an expert in SQL. And you know everything about databases. You will answer some questions about databases and SQL.`;
   }
   return "";
 };

store/chat.ts

@@ -5,7 +5,7 @@ import { generateUUID } from "../utils";
 
 export const defaultChat: Chat = {
   id: generateUUID(),
-  assistantId: "assistant-dba",
+  assistantId: "sql-assistant",
 };
 
 interface ChatState {