ai-chat-bot-interface 1.2.3 → 1.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.2.3",
+  "version": "1.3.1",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",

package/src/App.vue

@@ -4,7 +4,12 @@ import ChatUi from './ChatUi.vue';
 
 <template>
   <div style="width: 100vw; height: 100vh">
-    <chat-ui bot-id="000" token="pat_88888" uid="262598" :show-header="true" />
+    <chat-ui
+      bot-id="7471093458661720104"
+      token="pat_2yVcSFJUZB6c9Kdcv9iktIVFeGRuzyK3bAJY6GcqKrdGxTdjKMd1iDB09ipJ6YX8"
+      uid="262598"
+      :show-header="true"
+    />
   </div>
 </template>
 <style></style>

package/src/ChatUi.less

@@ -191,6 +191,29 @@
             color: #039938;
           }
         }
+        .think {
+          &_status {
+            .flexrsc();
+            gap: 5px;
+            font-size: 14px;
+            font-weight: 500;
+            .icon {
+              color: #999;
+              font-size: 24px;
+            }
+          }
+          &_text {
+            word-break: break-all;
+            white-space: pre-wrap;
+            color: #666;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 18px;
+            padding-left: 8px;
+            margin: 15px 0 20px;
+            border-left: 4px solid #dadada;
+          }
+        }
       }
 
       .recm {

package/src/ChatUi.vue

@@ -62,6 +62,18 @@
                 <!--<span class="time">12:30</span>-->
               </div>
               <div class="box">
+                <template v-if="conv.reasoning_content">
+                  <div v-if="conv.status === 'thinking'" class="think_status">
+                    <thinking-icon class="icon" /> 思考中...
+                  </div>
+                  <div v-else class="think_status">
+                    <ok-icon class="icon" /> 思考完成
+                  </div>
+
+                  <p class="think_text">
+                    {{ conv.reasoning_content }}
+                  </p>
+                </template>
                 <template v-if="conv.content">
                   <p class="text" v-html="conv.content"></p>
                   <template v-if="!isAnswering">
@@ -148,6 +160,8 @@ import NewChat from './components/icons/newChat.vue';
 import LoadingIcon from './components/icons/loadingIcon.vue';
 import LoadingIcon2 from './components/icons/loadingIcon2.vue';
 import ImgeList from './components/imgeList.vue';
+import ThinkingIcon from './components/icons/ThinkingIcon.vue';
+import OkIcon from './components/icons/OkIcon.vue';
 
 const chatOptions = computed(() => {
   return {
@@ -271,7 +285,6 @@ const createConv = async () => {
 
 const chatConv = async (data) => {
   let isInCode = Array.isArray(data); //  data.hasOwnProperty('text') && data.hasOwnProperty('code');
-  console.log('=========', isInCode, data);
   let botId = props.botId;
   if (!(!isAnswering.value && (inputText.value || isInCode))) {
     return;
@@ -286,6 +299,7 @@ const chatConv = async (data) => {
     bot_id: botId,
     role: 'user',
     content: '',
+    reasoning_content: '',
     status: 'ended',
     extra: [],
   };
@@ -366,6 +380,7 @@ const chatConv = async (data) => {
     bot_id: '',
     role: 'assistant',
     content: '',
+    reasoning_content: '',
     status: 'answering',
     extra: [],
   });
@@ -400,7 +415,6 @@ const chatConv = async (data) => {
         const strObj = JSON.parse(str);
         console.log('Received:', strObj);
         isAnswering.value = true;
-        historyList.value[idx].status = 'answering';
         if (!historyList.value[idx].bot_id && strObj.bot_id) {
           historyList.value[idx].bot_id = strObj.bot_id;
         }
@@ -408,6 +422,14 @@ const chatConv = async (data) => {
           historyList.value[idx].conversation_id = strObj.conversation_id;
         }
         if (
+          strObj.hasOwnProperty('reasoning_content') &&
+          strObj.reasoning_content &&
+          strObj.type === 'answer'
+        ) {
+          historyList.value[idx].status = 'thinking';
+          historyList.value[idx].reasoning_content += strObj.reasoning_content;
+          scrollToEnd();
+        } else if (
           strObj.hasOwnProperty('content') &&
           strObj.hasOwnProperty('content_type') &&
           strObj.content_type === 'text' &&
@@ -415,6 +437,7 @@ const chatConv = async (data) => {
           strObj.type === 'answer' &&
           !strObj.hasOwnProperty('created_at')
         ) {
+          historyList.value[idx].status = 'answering';
           historyList.value[idx].content = handleText(
             historyList.value[idx].content + strObj.content,
           );
@@ -460,6 +483,7 @@ const queryHistoryList = async () => {
             role: row.role,
             meta_data: row.meta_data,
             content: handleText(row.content),
+            reasoning_content: row.reasoning_content,
             status: 'ended',
             extra: [],
           });
@@ -524,9 +548,9 @@ const queryHistoryList = async () => {
         historyList.value[idx].extra = [...card.extra];
       }
     });
-
-    console.log(historyList.value, cardList);
   }
+
+  console.log('== history ==', historyList.value);
 };
 
 const queryBotInfo = async () => {

package/src/components/OperateModule.vue

@@ -155,7 +155,6 @@ const fetchOptions = computed(() => {
 watch(
   () => props.modelValue,
   () => {
-    console.log('=== ccc ===');
     resizeTextarea();
   },
 );

package/src/components/icons/OkIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.78271 12C3.78271 13.0792 3.99526 14.1477 4.40822 15.1447C4.82118 16.1416 5.42646 17.0475 6.18951 17.8106C6.95256 18.5736 7.85843 19.1789 8.8554 19.5919C9.85238 20.0048 10.9209 20.2174 12 20.2174C13.0792 20.2174 14.1477 20.0048 15.1447 19.5919C16.1416 19.1789 17.0475 18.5736 17.8106 17.8106C18.5736 17.0475 19.1789 16.1416 19.5919 15.1447C20.0048 14.1477 20.2174 13.0792 20.2174 12C20.2174 10.9209 20.0048 9.85238 19.5919 8.8554C19.1789 7.85843 18.5736 6.95256 17.8106 6.18951C17.0475 5.42646 16.1416 4.82118 15.1447 4.40822C14.1477 3.99526 13.0792 3.78271 12 3.78271C10.9209 3.78271 9.85238 3.99526 8.8554 4.40822C7.85843 4.82118 6.95256 5.42646 6.18951 6.18951C5.42646 6.95256 4.82118 7.85843 4.40822 8.8554C3.99526 9.85238 3.78271 10.9209 3.78271 12Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.0677 14.4192L8.08502 11.4365C7.87938 11.2308 7.54542 11.2308 7.33978 11.4365C7.13414 11.6421 7.13414 11.9761 7.33978 12.1817L10.3225 15.1644C10.5281 15.3701 10.8621 15.3701 11.0677 15.1644C11.2751 14.9605 11.2751 14.6266 11.0677 14.4192Z"
+      fill="#fff"
+    />
+    <path
+      d="M16.6693 8.84027C16.4636 8.63462 16.1297 8.63462 15.924 8.84027L10.456 14.31C10.2503 14.5157 10.2503 14.8496 10.456 15.0553C10.6616 15.2609 10.9956 15.2609 11.2012 15.0553L16.6693 9.58727C16.8767 9.37986 16.8767 9.04591 16.6693 8.84027Z"
+      fill="#fff"
+    />
+  </svg>
+</template>
+
+<script></script>
+
+<style scoped></style>

package/src/components/icons/ThinkingIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.3752 6.19542C18.3663 5.84188 18.0971 5.61907 17.7113 5.62719C17.3249 5.63532 17.1259 5.87105 17.0624 6.22473C17.0295 6.40814 17.0401 6.60002 17.0382 6.78818C17.0349 7.1092 17.0373 7.43028 17.0373 7.75135C16.9871 7.77411 16.9369 7.79688 16.8867 7.81966C16.7181 7.65766 16.5524 7.4926 16.3805 7.33415C14.8317 5.90621 12.9939 5.37461 10.9359 5.69056C8.03017 6.13662 5.87726 8.55583 5.62463 11.5758C5.38764 14.4087 7.21523 17.1459 9.95849 18.0667C12.7336 18.9982 15.8214 17.914 17.3822 15.4574C17.4827 15.2992 17.5871 15.1369 17.6484 14.962C17.7675 14.6224 17.7077 14.3062 17.3722 14.1247C17.049 13.9499 16.7426 14.0201 16.5131 14.3168C16.3983 14.4652 16.3111 14.6344 16.204 14.7891C15.2363 16.1865 13.907 16.9479 12.206 17.0308C9.92842 17.1419 7.84057 15.6645 7.17679 13.487C6.49124 11.238 7.43946 8.81484 9.46764 7.6327C11.4392 6.48354 13.9702 6.81332 15.5656 8.43366C15.6825 8.55231 15.7612 8.70851 15.9506 8.98094C15.3277 8.98094 14.8482 8.95558 14.3726 8.98836C13.9335 9.01865 13.7009 9.27998 13.7045 9.64685C13.708 10.0041 13.9569 10.2996 14.3795 10.31C15.4824 10.3371 16.5866 10.3273 17.6901 10.3155C18.0536 10.3117 18.3546 10.1036 18.3656 9.74431C18.4019 8.56213 18.4048 7.37778 18.3752 6.19542Z"
+      fill="currentColor"
+    >
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="1.5s"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+</template>
+
+<script></script>
+
+<style></style>