feat: message length control

src/components/ChatInput.vue

@@ -103,6 +103,8 @@ const doChat = async () => {
     messages: [...props.localMessages, {role: 'user', content: promptForm.value.content, file: promptForm.value.file}],
     model: model.value,
   };
+  // max message length control
+  params.messages = params.messages.slice(-(maxMessage.value + 1));
   // system define
   if (props.systemDefine) {
     params.messages.unshift({role: 'system', content: props.systemDefine});
@@ -330,6 +332,34 @@ const doSelectSystemPreset = (id) => {
     }
   });
 };
+const chosenPreset = ref('');
+watch(() => presetVisible.value, () => {
+  if (!presetVisible.value) {
+    presetVisible.value = false;
+    chosenPreset.value = '';
+  }
+});
+
+// message length
+const maxMessageVisible = ref(false);
+const messageLength = ref([0, 32]);
+const maxMessage = ref(10);
+watch(() => maxMessage.value, () => {
+  if (maxMessage.value % 2 !== 0) {
+    maxMessage.value++;
+  }
+  localStorage.setItem(localMaxMessageKey.value, JSON.stringify(maxMessage.value));
+});
+const showMaxMessage = () => maxMessageVisible.value = true;
+const localMaxMessageKey = ref('local-max-message');
+onMounted(() => {
+  const value = localStorage.getItem(localMaxMessageKey.value);
+  if (value) {
+    try {
+      maxMessage.value = JSON.parse(value);
+    } catch (_) {}
+  }
+});
 
 defineExpose({reGenerate, promptForm});
 </script>
@@ -410,6 +440,19 @@ defineExpose({reGenerate, promptForm});
             </a-button>
           </a-space>
           <a-space>
+            <a-button
+              v-if="showEditBox"
+              :disabled="chatLoading"
+              @click="showMaxMessage"
+              class="chat-input-left-button"
+            >
+              <a-space :size="2">
+                <icon-history />
+                <span>
+                  {{ maxMessage }}
+                </span>
+              </a-space>
+            </a-button>
             <a-button
               v-if="showEditBox"
               type="primary"
@@ -444,11 +487,43 @@ defineExpose({reGenerate, promptForm});
         </a-spin>
       </a-form-item>
     </a-form>
+    <a-modal
+      v-model:visible="maxMessageVisible"
+      :footer="false"
+      :esc-to-close="true"
+    >
+      <template #title>
+        <div style="text-align: left; width: 100%">
+          {{ $t('MaxMessagesCount') }}
+        </div>
+      </template>
+      <a-space
+        direction="vertical"
+      >
+        <a-input-number
+          v-model="maxMessage"
+          :mode="'button'"
+          :style="{ width: '100%' }"
+          :step="2"
+          :min="messageLength[0]"
+          :max="messageLength[1]"
+        />
+        <a-slider
+          v-model:model-value="maxMessage"
+          :style="{ width: '100%' }"
+          :step="2"
+          :min="messageLength[0]"
+          :max="messageLength[1]"
+        />
+        <div class="model-context-tips">
+          {{ $t('ModelContextLengthTips') }}
+        </div>
+      </a-space>
+    </a-modal>
     <a-modal
       v-model:visible="presetVisible"
       :footer="false"
       :esc-to-close="true"
-      @cancel="presetVisible = false"
     >
       <template #title>
         <div style="text-align: left; width: 100%">
@@ -465,6 +540,7 @@ defineExpose({reGenerate, promptForm});
           @change="doSelectSystemPreset"
           :placeholder="$t('PleaseChoosePreset')"
           :allow-search="true"
+          v-model="chosenPreset"
         >
           <a-option
             v-for="item in systemPresets"
@@ -534,7 +610,8 @@ defineExpose({reGenerate, promptForm});
   width: 100%;
 }
 
-.model-ignore-system-tips {
+.model-ignore-system-tips,
+.model-context-tips {
   color: var(--color-neutral-6);
   font-size: 12px;
 }

src/locale/en-us.js

@@ -30,6 +30,8 @@ const mEnUS = {
   PleaseChoosePreset: 'Please choose one preset',
   Remove: 'Remove',
   ModelIgnoreSystemDefineTips: 'Some models may ignore presets, if the output does not meet expectations, try switching models.',
+  MaxMessagesCount: 'Max Context',
+  ModelContextLengthTips: 'Context refers to historical messages and related information within a conversation. By carrying context, ChatGPT can better understand the user’s intent and adjust the content of its responses accordingly.',
 };
 
 export default mEnUS;

src/locale/zh-cn.js

@@ -30,6 +30,8 @@ const mZhCN = {
   PleaseChoosePreset: '请选择预设',
   Remove: '移除',
   ModelIgnoreSystemDefineTips: '部分模型可能会忽略预设，如果输出不符合预期，请切换模型',
+  MaxMessagesCount: '对话上下文数量',
+  ModelContextLengthTips: '上下文是指对话中的历史消息和相关信息。通过携带上下文，模型可以更好地理解用户的意图，并对回复内容进行调整',
 };
 
 export default mZhCN;

src/views/Chat.vue

@@ -42,7 +42,6 @@ onMounted(() => {
     try {
       setSystemDefine(JSON.parse(value));
     } catch (e) {
-      console.log(e);
       setSystemDefine('');
     }
   } else {

src/views/Login.vue

@@ -1,13 +1,12 @@
 <script setup>
-import {signInAPI} from '../api/user';
+import {signInAPI} from '@/api/user';
 import {onMounted} from 'vue';
 import {Message} from '@arco-design/web-vue';
 
 const doLogin = () => {
   const url = new URL(window.location.href);
   const next = url.searchParams.get('next');
   const code = url.searchParams.get('code');
-  console.log(next);
   signInAPI({code}).then(
       () => {},
       (err) => {