From 2c7d816e1a834d783d5e7af5abcad513c8a10617 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Mon, 17 Apr 2023 17:33:20 +0800
Subject: [PATCH] feat: allow update conversation bot in UI

---
 src/components/ConnectionSidebar.tsx          | 31 +++++++++----------
 ...eModal.tsx => UpdateConversationModal.tsx} | 30 +++++++++++++++---
 src/locales/en.json                           |  6 +++-
 src/locales/zh.json                           |  6 +++-
 src/store/assistant.ts                        |  2 +-
 5 files changed, 50 insertions(+), 25 deletions(-)
 rename src/components/{EditConversationTitleModal.tsx => UpdateConversationModal.tsx} (51%)

diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index fd98e8f..7daaa6e 100644
--- a/src/components/ConnectionSidebar.tsx
+++ b/src/components/ConnectionSidebar.tsx
@@ -13,12 +13,12 @@ import LocaleSwitch from "./LocaleSwitch";
 import DarkModeSwitch from "./DarkModeSwitch";
 import CreateConnectionModal from "./CreateConnectionModal";
 import SettingModal from "./SettingModal";
-import EditConversationTitleModal from "./EditConversationTitleModal";
+import UpdateConversationModal from "./UpdateConversationModal";
 
 interface State {
   showCreateConnectionModal: boolean;
   showSettingModal: boolean;
-  showEditConversationTitleModal: boolean;
+  showUpdateConversationModal: boolean;
 }
 
 const ConnectionSidebar = () => {
@@ -29,10 +29,10 @@ const ConnectionSidebar = () => {
   const [state, setState] = useState<State>({
     showCreateConnectionModal: false,
     showSettingModal: false,
-    showEditConversationTitleModal: false,
+    showUpdateConversationModal: false,
   });
   const [editConnectionModalContext, setEditConnectionModalContext] = useState<Connection>();
-  const [editConversationTitleModalContext, setEditConversationTitleModalContext] = useState<Conversation>();
+  const [updateConversationModalContext, setUpdateConversationModalContext] = useState<Conversation>();
   const [isRequestingDatabase, setIsRequestingDatabase] = useState<boolean>(false);
   const connectionList = connectionStore.connectionList;
   const currentConnectionCtx = connectionStore.currentConnectionCtx;
@@ -88,10 +88,10 @@ const ConnectionSidebar = () => {
     });
   };
 
-  const toggleEditConversationTitleModal = (show = true) => {
+  const toggleUpdateConversationModal = (show = true) => {
     setState({
       ...state,
-      showEditConversationTitleModal: show,
+      showUpdateConversationModal: show,
     });
   };
 
@@ -139,11 +139,11 @@ const ConnectionSidebar = () => {
     }
   };
 
-  const handleEditConversationTitle = (conversation: Conversation) => {
-    setEditConversationTitleModalContext(conversation);
+  const handleEditConversation = (conversation: Conversation) => {
+    setUpdateConversationModalContext(conversation);
     setState({
       ...state,
-      showEditConversationTitleModal: true,
+      showUpdateConversationModal: true,
     });
   };
 
@@ -265,16 +265,16 @@ const ConnectionSidebar = () => {
                     <div className="p-1 flex flex-col justify-start items-start bg-white dark:bg-zinc-900 shadow-lg rounded-lg">
                       <DropdownItem
                         className="w-full p-1 px-2 flex flex-row justify-start items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800"
-                        onClick={() => handleEditConversationTitle(conversation)}
+                        onClick={() => handleEditConversation(conversation)}
                       >
-                        <Icon.FiEdit3 className="w-4 h-auto mr-1 opacity-70" />
+                        <Icon.FiEdit3 className="w-4 h-auto mr-2 opacity-70" />
                         {t("common.edit")}
                       </DropdownItem>
                       <DropdownItem
                         className="w-full p-1 px-2 flex flex-row justify-start items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800"
                         onClick={() => handleDeleteConversation(conversation)}
                       >
-                        <Icon.IoTrash className="w-4 h-auto mr-1 opacity-70" />
+                        <Icon.IoTrash className="w-4 h-auto mr-2 opacity-70" />
                         {t("common.delete")}
                       </DropdownItem>
                     </div>
@@ -309,11 +309,8 @@ const ConnectionSidebar = () => {
 
       {state.showSettingModal && <SettingModal close={() => toggleSettingModal(false)} />}
 
-      {editConversationTitleModalContext && state.showEditConversationTitleModal && (
-        <EditConversationTitleModal
-          close={() => toggleEditConversationTitleModal(false)}
-          conversation={editConversationTitleModalContext}
-        />
+      {updateConversationModalContext && state.showUpdateConversationModal && (
+        <UpdateConversationModal close={() => toggleUpdateConversationModal(false)} conversation={updateConversationModalContext} />
       )}
     </>
   );
diff --git a/src/components/EditConversationTitleModal.tsx b/src/components/UpdateConversationModal.tsx
similarity index 51%
rename from src/components/EditConversationTitleModal.tsx
rename to src/components/UpdateConversationModal.tsx
index d38e408..278d327 100644
--- a/src/components/EditConversationTitleModal.tsx
+++ b/src/components/UpdateConversationModal.tsx
@@ -1,22 +1,31 @@
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useConversationStore } from "@/store";
+import { assistantList, useConversationStore } from "@/store";
 import { Conversation } from "@/types";
 import TextField from "./kit/TextField";
 import Modal from "./kit/Modal";
+import Select from "./kit/Select";
 
 interface Props {
   conversation: Conversation;
   close: () => void;
 }
 
-const EditConversationTitleModal = (props: Props) => {
+const UpdateConversationModal = (props: Props) => {
   const { close, conversation } = props;
   const { t } = useTranslation();
   const conversationStore = useConversationStore();
   const [title, setTitle] = useState(conversation.title);
+  const [assistantId, setAssistantId] = useState(conversation.assistantId);
   const allowSave = title !== "";
+  const assistantItems = assistantList.map((assistant) => {
+    return {
+      value: assistant.id,
+      label: assistant.name,
+    };
+  });
+  const currentAssistant = assistantList.find((assistant) => assistant.id === assistantId);
 
   const handleSaveEdit = () => {
     const formatedTitle = title.trim();
@@ -26,16 +35,27 @@ const EditConversationTitleModal = (props: Props) => {
 
     conversationStore.updateConversation(conversation.id, {
       title: formatedTitle,
+      assistantId: assistantId,
     });
-    toast.success("Conversation title updated");
+    toast.success("Conversation updated");
     close();
   };
 
   return (
-    <Modal title={t("conversation.edit-title")} onClose={close}>
+    <Modal title={t("conversation.update")} onClose={close}>
       <div className="w-full flex flex-col justify-start items-start mt-2">
+        <label className="block text-sm font-medium text-gray-700 mb-1">{t("conversation.title")}</label>
         <TextField placeholder={t("conversation.conversation-title") || ""} value={title} onChange={(value) => setTitle(value)} />
       </div>
+      <div className="w-full flex flex-col justify-start items-start mt-2">
+        <label className="block text-sm font-medium text-gray-700 mb-1">{t("assistant.self")}</label>
+        <Select className="w-full" value={assistantId} itemList={assistantItems} onValueChange={(value) => setAssistantId(value)} />
+        {currentAssistant && (
+          <div className="w-full flex flex-col justify-start items-start">
+            <p className="block text-sm text-gray-700 mt-1 ml-3">{currentAssistant.description}</p>
+          </div>
+        )}
+      </div>
       <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
         <button className="btn btn-outline" onClick={close}>
           {t("common.close")}
@@ -48,4 +68,4 @@ const EditConversationTitleModal = (props: Props) => {
   );
 };
 
-export default EditConversationTitleModal;
+export default UpdateConversationModal;
diff --git a/src/locales/en.json b/src/locales/en.json
index 79893be..15b4f90 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -14,13 +14,17 @@
   "conversation": {
     "new-chat": "New Chat",
     "conversation-title": "Conversation title",
-    "edit-title": "Edit conversation title"
+    "update": "Update conversation",
+    "title": "Title"
   },
   "connection": {
     "self": "Connection",
     "new": "Create Connection",
     "select-database": "Select your database"
   },
+  "assistant": {
+    "self": "Bot"
+  },
   "execution": {
     "title": "Execute SQL",
     "message": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 4dcedc3..7f382b9 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -14,13 +14,17 @@
   "conversation": {
     "new-chat": "新建会话",
     "conversation-title": "会话标题",
-    "edit-title": "编辑会话标题"
+    "update": "更新会话",
+    "title": "标题"
   },
   "connection": {
     "self": "连接",
     "new": "创建连接",
     "select-database": "选择数据库"
   },
+  "assistant": {
+    "self": "机器人"
+  },
   "execution": {
     "title": "执行 SQL",
     "message": {
diff --git a/src/store/assistant.ts b/src/store/assistant.ts
index 4cf5961..bff41d5 100644
--- a/src/store/assistant.ts
+++ b/src/store/assistant.ts
@@ -2,7 +2,7 @@ import { first } from "lodash-es";
 import { Assistant, Id } from "@/types";
 import * as customAssistantList from "../../assistants";
 
-const assistantList: Assistant[] = Object.keys(customAssistantList).map((name) => {
+export const assistantList: Assistant[] = Object.keys(customAssistantList).map((name) => {
   return {
     ...((customAssistantList as any)[name].default as Assistant),
   };