feat: add advanced options context limit

messages/en.json

@@ -61,6 +61,10 @@
     "title": "Model Setting",
     "model": "Model",
     "initialSystemInstructions": "Initial System Instructions",
-    "save": "Save"
+    "save": "Save",
+    "advancedOptions": "View Advanced Options (Context Limit etc.)",
+    "contextLimit": "Context Limit",
+    "contextLimitDes": "The number of messages to include in the context for the AI assistant. When set to 1, the AI assistant will only see and remember the most recent message.",
+    "all": "All"
   }
 }

messages/zh.json

@@ -61,6 +61,10 @@
     "title": "模型设置",
     "model": "模型",
     "initialSystemInstructions": "初始系统说明",
-    "save": "保存"
+    "save": "保存",
+    "advancedOptions": "查看高级选项（上下文限制 等）",
+    "contextLimit": "上下文限制",
+    "contextLimitDes": "AI 助手上下文中包含的信息数量。当设置为 1 时，AI 助手将只看到并记住最近的信息。",
+    "all": "所有"
   }
 }

src/app/[locale]/chat/[chatId]/PageModelSet.tsx

@@ -8,6 +8,21 @@ import { SIDEBAR_CHAT_STORAGE_KEY } from "~/const";
 import React, { useState } from "react";
 import { Models } from "~/const/switcher";
 import { useOpenModalState } from "~/store/page";
+import { Disclosure } from "@headlessui/react";
+import { ChevronRight } from "lucide-react";
+
+const contextLimitData = [
+  { label: "Last 1 message", value: 1 },
+  { label: "Last 2 messages", value: 2 },
+  { label: "Last 3 messages", value: 3 },
+  { label: "Last 4 messages", value: 4 },
+  { label: "Last 5 messages", value: 5 },
+  { label: "Last 6 messages", value: 6 },
+  { label: "Last 7 messages", value: 7 },
+  { label: "Last 8 messages", value: 8 },
+  { label: "Last 9 messages", value: 9 },
+  { label: "Last 10 messages", value: 10 },
+];
 
 function PageModelSet() {
   const t = useTranslations("ModelSetting");
@@ -29,10 +44,13 @@ function PageModelSet() {
     Models.find((model) => model === currentChat.chatModel) as string
   );
 
+  const [contextLimit, setContextLimit] = useState(currentChat.contextLimit);
+
   const saveModelSetting = () => {
     const newCurrentChat = {
       ...currentChat,
       chatModel: selected,
+      contextLimit,
     } as SideBarChatProps;
     const newSidebarData = sidebarData.map((item) => {
       if (item.id === selectedChatId) {
@@ -44,6 +62,10 @@ function PageModelSet() {
     setIsModalOpen(false);
   };
 
+  const contextLimitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setContextLimit(Number(e.target.value));
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -58,6 +80,49 @@ function PageModelSet() {
           disabled
         />
       </div>
+      <div>
+        <Disclosure>
+          {({ open }) => (
+            <>
+              <Disclosure.Button className="flex w-full justify-between rounded-lg bg-blue-200 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-400 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75">
+                <span>{t("advancedOptions")}</span>
+                <ChevronRight
+                  className={`${
+                    open ? "rotate-90 transform" : ""
+                  } h-5 w-5 text-blue-500`}
+                />
+              </Disclosure.Button>
+              <Disclosure.Panel className="px-2 pb-2 pt-4">
+                <div>
+                  <div className="text-sm font-semibold">
+                    <span>{t("contextLimit")}</span>
+                  </div>
+                  <div className="my-2 text-xs text-neutral-600">
+                    {t("contextLimitDes")}
+                  </div>
+                  <div>
+                    <select
+                      onChange={contextLimitChange}
+                      defaultValue={contextLimit}
+                      value={contextLimit}
+                      className="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-neutral-900 ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-blue-600 dark:bg-neutral-700 dark:text-white sm:text-sm sm:leading-6"
+                    >
+                      {contextLimitData.map((item) => {
+                        return (
+                          <option key={item.value} value={item.value}>
+                            {item.label}
+                          </option>
+                        );
+                      })}
+                    </select>
+                  </div>
+                </div>
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+      </div>
+
       <button
         type="button"
         className="primary-button"

src/components/PromptInput.tsx

@@ -187,11 +187,10 @@ function PromptInput() {
     setChatMessage(newData);
   };
 
-  function getMessages(conversation: ChatMessages) {
+  function getMessages(conversation: ChatMessages, number: number) {
     const data = conversation?.messages;
     const messages: ChatCompletionRequestMessage[] = [];
     messages.push({ role: "system", content: data[0].text });
-    const number = 5;
     let formatData = [];
     if (data.length <= number) {
       formatData = data;
@@ -235,7 +234,10 @@ function PromptInput() {
         body: JSON.stringify({
           apiKey: apiKeyValue,
           apiBaseUrl: apiEndPointValue,
-          conversation: getMessages(conversation),
+          conversation: getMessages(
+            conversation,
+            currentSidebarData.contextLimit
+          ),
           stream: true,
           model: currentSidebarData.chatModel,
         }),
@@ -293,7 +295,10 @@ function PromptInput() {
         body: JSON.stringify({
           apiKey: apiKeyValue,
           apiBaseUrl: apiEndPointValue,
-          conversation: getMessages(conversation),
+          conversation: getMessages(
+            conversation,
+            currentSidebarData.contextLimit
+          ),
           stream: false,
           model: currentSidebarData.chatModel,
         }),

src/const.ts

@@ -15,6 +15,8 @@ const SYSTEM_MESSAGE_DEFAULT =
 
 const CHAT_MODEL_DEFAULT = "gpt-3.5-turbo";
 
+const CONTEXT_LIMIT_DEFAULT = 5;
+
 const ENABLED_STREAM = `${LOCAL_STORAGE_PREFIX}ENABLED_STREAM`;
 
 export {
@@ -27,4 +29,5 @@ export {
   OPENAI_API_KEY_STORAGE_KEY,
   OPENAI_API_ENDPOINT_STORAGE_KEY,
   ENABLED_STREAM,
+  CONTEXT_LIMIT_DEFAULT,
 };

src/tools.ts

@@ -1,5 +1,9 @@
 import { nanoid } from "nanoid";
-import { CHAT_MODEL_DEFAULT, SYSTEM_MESSAGE_DEFAULT } from "./const";
+import {
+  CHAT_MODEL_DEFAULT,
+  CONTEXT_LIMIT_DEFAULT,
+  SYSTEM_MESSAGE_DEFAULT,
+} from "./const";
 
 const textAreaAutoHeight = (id: string) => {
   const textArea = document.getElementById(id) as HTMLTextAreaElement;
@@ -31,6 +35,7 @@ const createNewChat = ({
     createAt: Date.now(),
     systemMessage: SYSTEM_MESSAGE_DEFAULT,
     chatModel: CHAT_MODEL_DEFAULT,
+    contextLimit: CONTEXT_LIMIT_DEFAULT,
   };
   const newChatData = [...sidebarData, newChat];
   setSidebarData(newChatData);

typing.d.ts

@@ -2,11 +2,11 @@ type SideBarChatProps = {
   id: string;
   title: string;
   des: string;
-  // Timestamp
   createAt: int;
   updateAt?: int;
   systemMessage: string;
   chatModel: string;
+  contextLimit: int;
 };
 
 type MessagesItem = {
@@ -47,8 +47,6 @@ type Prompt = {
   des: string;
   content: string;
   source: string;
-  // type?: "custom" | "default";
-  // createAt?: admin.firestore.Timestamp;
 };
 
 type Prompts = {