feat: chatbox

subquery · Nov 4, 2024 · ec7d5fa · ec7d5fa
1 parent f3e0f85
commit ec7d5fa
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 18 deletions.
diff --git a/docs/.vuepress/components/Chatbox.vue b/docs/.vuepress/components/Chatbox.vue
@@ -7,21 +7,22 @@
             <ChatCloseIcon></ChatCloseIcon>
           </div>
           <Typography tag="h5" type="dark">SubQuery AI</Typography>
-          <IoClose
+          <Icon
+            name="cross"
             class="content-close-icon"
             @click="
               () => {
                 showPopover = false;
               }
             "
-          ></IoClose>
+          ></Icon>
         </div>
         <div class="content-main">
           <ConversationMessage
             :property="currentChat"
             :answerStatus="answerStatus"
             version="chatbox"
-            ref="{messageRef}"
+            ref="messageRef"
           ></ConversationMessage>
         </div>
         <div class="content-bottom">
@@ -100,8 +101,8 @@ enum ChatBotAnswerStatus {
   Error = "error",
 }
 
-// const chatUrl = "https://ai.thechaindata.com/v1/chat/completions";
-const chatUrl = "https://olla.wk.zohu.vip:8008/v1/chat/completions";
+const chatUrl = "https://ai.thechaindata.com/v1/chat/completions";
+// const chatUrl = "https://olla.wk.zohu.vip:8008/v1/chat/completions";
 const showPopover = ref(false);
 const inputValue = ref("");
 const answerStatus = ref(ChatBotAnswerStatus.Loading);
@@ -119,6 +120,7 @@ const currentChat = ref<ConversationProperty>({
   chatUrl,
   prompt: "",
 });
+const messageRef = ref<{ scrollDown: (argv1?: boolean) => void } | null>(null);
 
 const chatWithStream = async (
   url: string,
@@ -177,7 +179,7 @@ const sendMessage = async () => {
 
     inputValue.value = "";
     await pushNewMsgToChat(newChat, robotAnswer);
-    // messageRef.current?.scrollToBottom();
+    messageRef.value?.scrollDown();
     // set user's message first, then get the response
     const res = await chatWithStream(newChat.chatUrl, {
       messages: newChat.prompt
@@ -210,7 +212,7 @@ const sendMessage = async () => {
                 JSON.parse(invalidJson);
               robotAnswer.content += parsed?.choices?.[0]?.delta?.content;
               await pushNewMsgToChat(newChat, robotAnswer);
-              // messageRef.current?.scrollToBottom(true);
+              messageRef.value?.scrollDown(true);
               invalidJson = "";
             } catch (e) {
               // handle it until
@@ -229,7 +231,7 @@ const sendMessage = async () => {
               robotAnswer.content += parsed?.choices?.[0]?.delta?.content;
 
               await pushNewMsgToChat(newChat, robotAnswer);
-              // messageRef.current?.scrollToBottom(true);
+              messageRef.value?.scrollDown(true);
             } catch (e) {
               invalidJson += partWithHandle;
             }
@@ -244,6 +246,7 @@ const sendMessage = async () => {
           robotAnswer.content += parsed?.choices?.[0]?.delta?.content;
 
           await pushNewMsgToChat(newChat, robotAnswer);
+          messageRef.value?.scrollDown(true);
         } catch (e) {
           console.warn("Reach this code", invalidJson);
           // to reach this code, it means the response is not valid or the code have something wrong.
@@ -340,7 +343,7 @@ const sendMessage = async () => {
     justify-content: center;
   }
 
-  &-close-icon {
+  &-close-icon.content-close-icon {
     position: absolute;
     top: 15px;
     right: 15px;
@@ -388,4 +391,36 @@ const sendMessage = async () => {
     background: #000;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .van-popup {
+    display: flex;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+
+  .van-popover__content {
+    .content {
+      width: 100%;
+      height: 100%;
+
+      &-main {
+        flex: 1;
+        height: 1px; // overflow need set a value of height, flex 1 will grow to the max.
+      }
+    }
+  }
+
+  .chatbox {
+    .van-popover__wrapper {
+      transform: scale(0.8);
+      right: 0.7rem;
+      bottom: 7rem;
+    }
+  }
+}
 </style>
diff --git a/docs/.vuepress/components/ConversationMessage.vue b/docs/.vuepress/components/ConversationMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="conversation-message">
+  <div class="conversation-message" ref="messageAreaRef">
     <div v-for="message, index in property.messages" :key="index" :class="{
       'conversation-message-item': true,
       'conversation-message-item-lastOne': index === property.messages.length - 1 && message.role === 'assistant',
@@ -18,6 +18,8 @@
 
 <script setup lang="ts">
 import markdownit from 'markdown-it';
+import { nextTick } from 'vue';
+import { ref } from 'vue';
 type AiMessageType = 'text' | 'image_url';
 
 type AiMessageRole = 'assistant' | 'user' | 'system';
@@ -60,6 +62,25 @@ const md = markdownit({
   typographer: true
 });
 
+const messageAreaRef = ref<HTMLDivElement | null>(null);
+
+const scrollDown = (onlyWhenReachBottom = false) => {
+  if (onlyWhenReachBottom && messageAreaRef.value) {
+    // If render an image, then not working. TODO: fix it.
+    const ifReachBottom =
+      messageAreaRef.value?.scrollTop >= messageAreaRef.value?.scrollHeight - messageAreaRef.value?.clientHeight - 52;
+      if (ifReachBottom) {
+      messageAreaRef.value?.scrollTo(0, messageAreaRef.value?.scrollHeight);
+    }
+
+    return;
+  }
+  messageAreaRef.value?.scrollTo(0, messageAreaRef.value?.scrollHeight);
+}
+
+defineExpose({
+  scrollDown
+})
 
 </script>
 
@@ -72,6 +93,7 @@ const md = markdownit({
   overflow: auto;
   padding: 28px 20px;
   background: #000;
+  box-sizing: border-box;
 
   &-item {
     display: flex;
@@ -99,6 +121,7 @@ const md = markdownit({
         padding: 16px;
         border-radius: 12px;
         overflow: auto;
+
         code {
           background: transparent;
           border: none;
@@ -107,7 +130,10 @@ const md = markdownit({
         }
       }
 
-      h1,h2,h3,p {
+      h1,
+      h2,
+      h3,
+      p {
         margin: 0;
         word-break: break-word;
       }
@@ -133,15 +159,15 @@ const md = markdownit({
     }
 
     &.conversation-message-item-lastOne.loading {
-        .conversation-message-item-span {
-          &::after {
-            content: "▍";
-            align-self: flex-end;
-            margin-left: 8px;
-            animation: pulseCursor 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-          }
+      .conversation-message-item-span {
+        &::after {
+          content: "▍";
+          align-self: flex-end;
+          margin-left: 8px;
+          animation: pulseCursor 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
       }
+    }
   }
 
   &-item-user {
@@ -152,13 +178,21 @@ const md = markdownit({
       font-size: 14px;
       border-bottom-right-radius: 0;
       color: #000;
+
       .subql-markdown-preview {
         color: #fff;
       }
     }
   }
 }
 
+@media screen and (max-width: 768px) {
+  .conversation-message {
+    height: 100%;
+  }
+  
+}
+
 @keyframes pulseCursor {
   50% {
     opacity: 0;