From d7f90a2e7fe110d8c34f8f791f90d149f981e205 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Sun, 14 Apr 2024 16:48:21 +0800
Subject: [PATCH] Feat/chat UI (#47)

#35

---------

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 components.d.ts                          |   7 +
 package-lock.json                        |  29 ++-
 package.json                             |   3 +-
 src/lang/enUS.ts                         |   1 +
 src/lang/zhCN.ts                         |   1 +
 src/layout/components/the-aside.vue      |   2 +-
 src/layout/components/tool-bar-right.vue | 225 +++++++++++++++++++++++
 src/layout/index.vue                     |   2 +
 src/store/chatStore.ts                   |  32 ++++
 src/store/index.ts                       |   1 +
 src/views/editor/index.vue               |  32 ++--
 11 files changed, 316 insertions(+), 19 deletions(-)
 create mode 100644 src/layout/components/tool-bar-right.vue
 create mode 100644 src/store/chatStore.ts

diff --git a/components.d.ts b/components.d.ts
index 781f0f0..72e0e95 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,10 +8,14 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./src/components/AppProvider.vue')['default']
+    NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NButtonGroup: typeof import('naive-ui')['NButtonGroup']
     NCard: typeof import('naive-ui')['NCard']
     'NCard:': typeof import('naive-ui')['NCard:']
+    NCardBody: typeof import('naive-ui')['NCardBody']
+    NCardFooter: typeof import('naive-ui')['NCardFooter']
+    NCardHeader: typeof import('naive-ui')['NCardHeader']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
@@ -35,9 +39,12 @@ declare module 'vue' {
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSplit: typeof import('naive-ui')['NSplit']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']
diff --git a/package-lock.json b/package-lock.json
index 28385ae..84eee7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "DocKit",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "DocKit",
-      "version": "0.2.6",
+      "version": "0.2.7",
       "license": "Apache-2.0",
       "dependencies": {
         "buffer": "^6.0.3",
@@ -17,6 +17,7 @@
         "node-fetch": "^2.7.0",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
+        "ulidx": "^2.3.0",
         "update-electron-app": "^3.0.0",
         "vue": "^3.4.19",
         "vue-i18n": "^9.9.1",
@@ -52,7 +53,7 @@
         "eslint-plugin-vue": "^9.21.1",
         "husky": "^9.0.11",
         "jest": "^29.7.0",
-        "naive-ui": "^2.37.3",
+        "naive-ui": "^2.38.1",
         "prettier": "^3.2.5",
         "sass": "^1.71.0",
         "ts-jest": "^29.1.2",
@@ -10017,6 +10018,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/layerr": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layerr/-/layerr-2.0.1.tgz",
+      "integrity": "sha512-z0730CwG/JO24evdORnyDkwG1Q7b7mF2Tp1qRQ0YvrMMARbt1DFG694SOv439Gm7hYKolyZyaB49YIrYIfZBdg=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10655,9 +10661,9 @@
       }
     },
     "node_modules/naive-ui": {
-      "version": "2.37.3",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.37.3.tgz",
-      "integrity": "sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==",
+      "version": "2.38.1",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.38.1.tgz",
+      "integrity": "sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==",
       "dev": true,
       "dependencies": {
         "@css-render/plugin-bem": "^0.15.12",
@@ -13532,6 +13538,17 @@
       "integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
       "dev": true
     },
+    "node_modules/ulidx": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ulidx/-/ulidx-2.3.0.tgz",
+      "integrity": "sha512-36piWNqcdp9hKlQewyeehCaALy4lyx3FodsCxHuV6i0YdexSkjDOubwxEVr2yi4kh62L/0MgyrxqG4K+qtovnw==",
+      "dependencies": {
+        "layerr": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 772b0a5..d704446 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "node-fetch": "^2.7.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "ulidx": "^2.3.0",
     "update-electron-app": "^3.0.0",
     "vue": "^3.4.19",
     "vue-i18n": "^9.9.1",
@@ -65,7 +66,7 @@
     "eslint-plugin-vue": "^9.21.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
-    "naive-ui": "^2.37.3",
+    "naive-ui": "^2.38.1",
     "prettier": "^3.2.5",
     "sass": "^1.71.0",
     "ts-jest": "^29.1.2",
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index e1b0a39..2eafcd0 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -6,6 +6,7 @@ export const enUS = {
     github: 'GitHub',
     user: 'User',
     setting: 'Setting',
+    chatBot: 'AI Assistant',
   },
   setting: {
     basic: 'Basic',
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index a006e28..57d325f 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -6,6 +6,7 @@ export const zhCN = {
     github: 'GitHub',
     user: '用户',
     setting: '设置',
+    chatBot: 'AI助手',
   },
   setting: {
     basic: '通用设置',
diff --git a/src/layout/components/the-aside.vue b/src/layout/components/the-aside.vue
index 8ca8608..b2f46fc 100644
--- a/src/layout/components/the-aside.vue
+++ b/src/layout/components/the-aside.vue
@@ -46,7 +46,7 @@ import { ref, markRaw } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { DataBase, Folders, LogoGithub, Settings, UserAvatar, ExpandAll } from '@vicons/carbon';
 import { useAppStore } from '../../store';
-import theAsideIcon from './the-aside-icon.vue';
+import TheAsideIcon from './the-aside-icon.vue';
 const router = useRouter();
 const route = useRoute();
 const appStore = useAppStore();
diff --git a/src/layout/components/tool-bar-right.vue b/src/layout/components/tool-bar-right.vue
new file mode 100644
index 0000000..0906301
--- /dev/null
+++ b/src/layout/components/tool-bar-right.vue
@@ -0,0 +1,225 @@
+<template>
+  <n-card
+    v-if="chatBot.active"
+    class="chat-box-container"
+    :title="$t('aside.chatBot')"
+    content-class="chat-box-content"
+    :segmented="{
+      content: true,
+      footer: 'segmented',
+    }"
+  >
+    <template #header-extra></template>
+    <div class="message-list-box">
+      <n-scrollbar ref="scrollbar" :style="scrollBarStyle">
+        <div v-for="msg in messages" :key="msg.id">
+          <div
+            :class="[
+              msg.role === ChatMessageRole.USER ? 'message-item-container-user' : '',
+              'message-item-container',
+            ]"
+          >
+            <div class="message-item-header">
+              <n-icon size="26">
+                <bot v-if="msg.role === ChatMessageRole.BOT" />
+                <face-cool v-else />
+              </n-icon>
+              <span>{{ msg.role }}</span>
+            </div>
+            <div class="message-item-content">
+              <pre v-text="msg.content"></pre>
+            </div>
+          </div>
+        </div>
+      </n-scrollbar>
+    </div>
+    <template #footer>
+      <div class="message-box">
+        <n-input
+          v-model:value="message"
+          type="textarea"
+          :autosize="{
+            minRows: 3,
+          }"
+          placeholder="Type your message here..."
+        />
+        <n-button-group class="message-action-box">
+          <n-button text>
+            <template #icon></template>
+          </n-button>
+          <n-button text @click="submitMsg">
+            <template #icon>
+              <n-icon size="26">
+                <send-alt />
+              </n-icon>
+            </template>
+          </n-button>
+        </n-button-group>
+      </div>
+    </template>
+  </n-card>
+  <div class="tool-bar-right">
+    <the-aside-icon
+      v-for="item in smallNavList"
+      :key="item.id"
+      :popover-content="$t(`aside.${item.name}`)"
+    >
+      <div
+        class="icon-item"
+        :class="{ active: item.id === `${selectedItemId}` }"
+        @click="navClick(item)"
+      >
+        <n-icon size="26">
+          <component :is="item.icon" />
+        </n-icon>
+      </div>
+    </the-aside-icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { markRaw, ref } from 'vue';
+import { ChatBot, SendAlt, Bot, FaceCool } from '@vicons/carbon';
+import TheAsideIcon from './the-aside-icon.vue';
+import { ChatMessageRole, useChatStore } from '../../store';
+
+const chatStore = useChatStore();
+const { sendMessage } = chatStore;
+const { messages } = toRefs(chatStore);
+
+const selectedItemId = ref(-1);
+const chatBot = ref({ active: false });
+
+const navClick = (item: any) => {
+  selectedItemId.value = item.id;
+  if (item.id === 'chat-bot') {
+    chatBot.value.active = !chatBot.value.active;
+  }
+};
+
+const smallNavList = ref([
+  {
+    id: 'chat-bot',
+    icon: markRaw(ChatBot),
+    name: 'chatBot',
+  },
+]);
+
+const message = ref(''); // to hold the message
+const scrollbar = ref(null);
+
+const submitMsg = async () => {
+  if (message.value.trim().length < 1) return;
+  await sendMessage(message.value);
+  console.log('submitMsg', message.value);
+  scrollbar.value.scrollTo({ top: 999999 });
+  message.value = '';
+};
+
+const msgBoxHeight = ref(449);
+const scrollBarStyle = computed(() => `max-height: ${msgBoxHeight.value}px`);
+
+const updateHeight = () => {
+  if (chatBot.value.active) {
+    const chatMsgContent = document.querySelector('.chat-box-container .message-list-box');
+    msgBoxHeight.value = chatMsgContent.clientHeight;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('resize', updateHeight);
+  updateHeight();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateHeight);
+});
+</script>
+
+<style scoped>
+.tool-bar-right {
+  --aside-width: 40px;
+  width: var(--aside-width);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border-color);
+
+  .icon-item {
+    height: var(--aside-width);
+    margin: 10px 0;
+    display: flex;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    color: var(--text-color);
+    cursor: pointer;
+
+    .n-icon {
+      opacity: 0.4;
+      transition: 0.3s;
+    }
+
+    &.active {
+      position: relative;
+
+      .n-icon {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .n-icon {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.chat-box-container {
+  width: 500px;
+  .n-card__content {
+    margin: 0;
+    padding: 0;
+  }
+
+  .message-list-box {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    .message-item-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      padding: 10px;
+      .message-item-header {
+        display: flex;
+        align-items: center;
+        span {
+          font-weight: bold;
+        }
+        .n-icon {
+          margin-right: 10px;
+        }
+      }
+    }
+    .message-item-container-user {
+      background-color: var(--bg-color);
+      border-top: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+    }
+  }
+
+  .message-box {
+    background-color: var(--border-color);
+
+    .message-action-box {
+      display: flex;
+      justify-content: space-between;
+      height: 20px;
+      padding: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 4ce430a..95365e2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,12 +4,14 @@
     <div class="right-layout">
       <router-main />
     </div>
+    <tool-bar-right />
   </div>
 </template>
 
 <script setup lang="ts">
 import TheAside from './components/the-aside.vue';
 import RouterMain from '../components/RouterMain.vue';
+import ToolBarRight from './components/tool-bar-right.vue';
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/store/chatStore.ts b/src/store/chatStore.ts
new file mode 100644
index 0000000..09e81e7
--- /dev/null
+++ b/src/store/chatStore.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+import { ulid } from 'ulidx';
+
+enum MessageStatus {
+  SENDING = 'SENDING',
+  SENT = 'SENT',
+  FAILED = 'FAILED',
+}
+export enum ChatMessageRole {
+  USER = 'USER',
+  BOT = 'BOT',
+}
+export const useChatStore = defineStore('chat', {
+  state: (): {
+    messages: Array<{ id: string; status: MessageStatus; content: string; role: ChatMessageRole }>;
+  } => {
+    return {
+      messages: [],
+    };
+  },
+  actions: {
+    async sendMessage(content: string) {
+      const id = ulid();
+      this.messages.push({
+        id,
+        status: MessageStatus.SENT,
+        role: ChatMessageRole.USER,
+        content,
+      });
+    },
+  },
+});
diff --git a/src/store/index.ts b/src/store/index.ts
index 85d87eb..12d7675 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -10,3 +10,4 @@ export * from './appStore';
 export * from './userStore';
 export * from './connectionStore';
 export * from './sourceFileStore';
+export * from './chatStore';
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 1ce5360..f124edc 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="editor">
-    <div id="query-editor" ref="queryEditorRef"></div>
-    <div id="display-editor" ref="displayEditorRef"></div>
-  </div>
+  <n-split direction="horizontal" class="editor" v-model:size="queryEditorSize">
+    <template #1>
+      <div id="query-editor" ref="queryEditorRef"></div>
+    </template>
+    <template #2>
+      <div id="display-editor" ref="displayEditorRef"></div>
+    </template>
+  </n-split>
 </template>
 <script setup lang="ts">
 import * as monaco from 'monaco-editor';
 import { storeToRefs } from 'pinia';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, Ref, watch } from 'vue';
 import { useMessage } from 'naive-ui';
 import {
   buildSearchToken,
@@ -185,7 +189,7 @@ const executeQueryAction = async (
       ...action,
       index: action.index || established.value?.activeIndex?.index,
     });
-    displayEditor?.getModel()?.setValue(JSON.stringify(data, null, '  '));
+    displayJsonEditor(JSON.stringify(data, null, '  '));
   } catch (err) {
     const { status, details } = err as CustomError;
     message.error(`status: ${status}, details: ${details}`, {
@@ -263,6 +267,7 @@ const setupQueryEditor = (code: string) => {
     theme: getEditorTheme(),
     value: code ? code : defaultCodeSnippet,
     language: 'search',
+    minimap: { enabled: false },
   });
 
   autoIndentCmdId = queryEditor.addCommand(0, (ctx, args) =>
@@ -356,12 +361,20 @@ const setupQueryEditor = (code: string) => {
     }
   });
 };
+
+const queryEditorSize = ref(1);
+
+const displayJsonEditor = (content: string) => {
+  queryEditorSize.value = queryEditorSize.value === 1 ? 0.5 : queryEditorSize.value;
+  displayEditor?.getModel()?.setValue(content);
+};
 const setupJsonEditor = () => {
   displayEditor = monaco.editor.create(displayEditorRef.value, {
     automaticLayout: true,
     theme: getEditorTheme(),
     value: '',
     language: 'json',
+    minimap: { enabled: false },
   });
 };
 onMounted(async () => {
@@ -389,16 +402,13 @@ sourceFileAPI.onSaveShortcut(async () => {
 .editor {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-flow: row nowrap;
-
   #query-editor {
-    width: 50%;
+    width: 100%;
     height: 100%;
   }
 
   #display-editor {
-    width: 50%;
+    width: 100%;
     height: 100%;
     border-left: 1px solid var(--border-color);
   }