feat: optimized slash command

lisiur · Apr 11, 2023 · 0eb37c4 · 0eb37c4
1 parent aa32348
commit 0eb37c4
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 28 deletions.
diff --git a/web/src/components/chat/Chat.tsx b/web/src/components/chat/Chat.tsx
@@ -5,7 +5,8 @@ import { Chat } from "../../models/chat";
 import Header from "./Header";
 import History from "./History";
 import UserInput from "./UserInput";
-import { save } from "../../utils/api";
+import { save, listen } from "../../utils/api";
+import { isTauri } from "../../utils/env";
 
 export default defineComponent({
   name: "Chat",
@@ -28,27 +29,35 @@ export default defineComponent({
     const historyRef = ref<InstanceType<typeof History>>();
     const userInputRef = ref<InstanceType<typeof UserInput>>();
 
+    if (isTauri) {
+      listen("tauri://focus", () => {
+        // TODO: sync latest chat logs
+        // reload();
+      });
+    }
+
     const publicExpose = {
       focusInput,
+      reload,
     };
     expose(publicExpose);
 
+    function reload() {
+      historyRef.value?.reload();
+    }
+
     function sendMessage(message: string) {
       props.chat.sendMessage(message, {
         onFinish: () => historyRef.value?.stopAutoScroll(),
       });
-      setTimeout(() => {
-        historyRef.value?.startAutoScroll();
-      }, 20);
+      historyRef.value?.startAutoScroll();
     }
 
     function resendMessage(id: string) {
       props.chat.resendMessage(id, {
         onFinish: () => historyRef.value?.stopAutoScroll(),
       });
-      setTimeout(() => {
-        historyRef.value?.startAutoScroll();
-      }, 20);
+      historyRef.value?.startAutoScroll();
     }
 
     function updateMessage(id: string, content: string) {

diff --git a/web/src/components/chat/History.tsx b/web/src/components/chat/History.tsx
@@ -100,6 +100,17 @@ export default defineComponent({
       loadingRef
     );
 
+    watch(
+      () => props.chat.busy.value,
+      (busy) => {
+        if (busy) {
+          disabledTransition.value = true;
+        } else {
+          disabledTransition.value = false;
+        }
+      }
+    );
+
     watch(() => props.chat, reset);
 
     const hijackLink = (message: Message) => {
@@ -148,12 +159,6 @@ export default defineComponent({
       }
     );
 
-    watch(
-      () => props.chat.messages,
-      () => {
-        nextTick(scrollToBottom);
-      }
-    );
     onMounted(() => {
       nextTick(scrollToBottom);
     });
@@ -164,10 +169,16 @@ export default defineComponent({
     const publicInstance = {
       startAutoScroll,
       stopAutoScroll,
+      reload,
     };
 
     expose(publicInstance);
 
+    function reload() {
+      props.chat.clear();
+      reset();
+    }
+
     function renderMessage(message: Message) {
       if (message instanceof AssistantMessage) {
         return renderAssistantMessage(message);

diff --git a/web/src/components/chat/UserInput.tsx b/web/src/components/chat/UserInput.tsx
@@ -83,6 +83,10 @@ export default defineComponent({
         inputStatus.value = "command";
         filteredPrompts.value = fuzzySearchPrompts(userMessage.value.slice(1));
         selectedPromptIndex.value = 0;
+
+        if (filteredPrompts.value.length === 0) {
+          inputStatus.value = "normal";
+        }
       }
     });
 
@@ -148,8 +152,12 @@ export default defineComponent({
         } else if (e.key === "Enter") {
           if (filteredPrompts.value.length > 0) {
             inputStatus.value = "normal";
-            props.chat.changePrompt(
-              filteredPrompts.value[selectedPromptIndex.value]!.id
+            const prompt = filteredPrompts.value[selectedPromptIndex.value]!;
+            props.chat.changePrompt(prompt.id);
+            message.success(
+              t("chat.prompt.changed", {
+                name: prompt.name,
+              })
             );
             userMessage.value = "";
             e.preventDefault();

diff --git a/web/src/components/chat/commandPanel.tsx b/web/src/components/chat/commandPanel.tsx
@@ -1,4 +1,5 @@
-import { PropType, defineComponent } from "vue";
+import { NScrollbar } from "naive-ui";
+import { PropType, defineComponent, nextTick, watch } from "vue";
 
 export default defineComponent({
   props: {
@@ -12,20 +13,42 @@ export default defineComponent({
     },
   },
   setup(props, { expose }) {
+    watch(
+      () => props.selected,
+      () => {
+        setTimeout(() => {
+          document
+            .querySelector(`#prompt-${props.list[props.selected].value}`)
+            ?.scrollIntoView({
+              inline: "center",
+              block: "center",
+              behavior: "smooth",
+            });
+        });
+      }
+    );
+
     const publicInstance = {};
 
     expose(publicInstance);
 
     return (() => (
-      <div class="border bg-[var(--command-panel-bg-color)] rounded-md">
-        {props.list.map((item, index) => {
-          const isSelected = props.selected === index;
-          return (
-            <div class={[isSelected ? "bg-primary" : "", "py-1 px-2"]}>
-              {item.label}
-            </div>
-          );
-        })}
+      <div class="border bg-[var(--command-panel-bg-color)] rounded-md overflow-hidden p-1">
+        <NScrollbar class="max-h-[16rem]">
+          <div class="h-full">
+            {props.list.map((item, index) => {
+              const isSelected = props.selected === index;
+              return (
+                <div
+                  id={`prompt-${item.value}`}
+                  class={[isSelected ? "bg-primary" : "", "py-1 px-2"]}
+                >
+                  {item.label}
+                </div>
+              );
+            })}
+          </div>
+        </NScrollbar>
       </div>
     )) as unknown as typeof publicInstance;
   },

diff --git a/web/src/hooks/i18n.ts b/web/src/hooks/i18n.ts
@@ -36,8 +36,8 @@ function setLocale(lang: string) {
 
 function useI18n() {
   const { t: _t } = _useI18n();
-  const t = (key: keyof Messages) => {
-    return _t(key);
+  const t = (key: keyof Messages, options?: any) => {
+    return _t(key, options);
   };
 
   return {

diff --git a/web/src/hooks/lazyLoad.ts b/web/src/hooks/lazyLoad.ts
@@ -76,6 +76,7 @@ export function useLazyLoad<T>(
   return {
     hasMore,
     loading,
+    cursor,
     records,
     loadNext,
     firstBatchLoad,

diff --git a/web/src/i18n/enUS.ts b/web/src/i18n/enUS.ts
@@ -33,6 +33,8 @@ export const messages = {
   "chat.message.delete.hint": 'Are you sure to delete this message?',
   "chat.message.stopReply": 'Stop replying',
 
+  "chat.prompt.changed": "Prompt changed to: {name}",
+
   "chat.config.model": "Model",
   "chat.config.model.hint": "ID of the model to use.",
   "chat.config.maxBacktrack": "Max Backtrack",

diff --git a/web/src/i18n/zhCN.ts b/web/src/i18n/zhCN.ts
@@ -35,6 +35,8 @@ const messages: Messages = {
   "chat.message.delete.hint": "确定要删除此消息吗？",
   "chat.message.stopReply": "停止回复",
 
+  "chat.prompt.changed": "提示词更换为: {name}",
+
   "chat.config.model": "模型",
   "chat.config.model.hint": "要使用的模型的ID。",
   "chat.config.maxBacktrack": "最大回溯",

diff --git a/web/src/models/chat.ts b/web/src/models/chat.ts
@@ -80,6 +80,11 @@ export class Chat {
     }
   }
 
+  async clear() {
+    this.messages.length = 0;
+    this.prevCursor = undefined;
+  }
+
   async stopReply() {
     this.busy.value = false;
     let user_message_id = this.messages.findLast(

diff --git a/web/src/themes/light/vars.ts b/web/src/themes/light/vars.ts
@@ -37,7 +37,7 @@ const vars: ThemeVars = {
     codeBgColor: "#eee",
     draggingMenuBgColor: "#dedede",
     windowBorderColor: "#bbb",
-    commandPanelBgColor: "#bbb",
+    commandPanelBgColor: "#ddd",
   },
 };