feat: 支持前置消息

app/components/Messages.tsx

@@ -38,7 +38,13 @@ export const Messages = () => {
     <div className="md:grow" style={{ display: 'flow-root' }}>
       <SystemMessage>{SYSTEM_MESSAGE}</SystemMessage>
       <Message role={Role.assistant} content={WELCOME_MESSAGE} />
-      {settings.systemMessage?.content && <SystemMessage>system: {settings.systemMessage.content}</SystemMessage>}
+      {[...(settings.systemMessage ? [settings.systemMessage] : []), ...(settings.prefixMessages ?? [])].map(
+        (message, index) => (
+          <SystemMessage key={index}>
+            {message.role}: {message.content}
+          </SystemMessage>
+        ),
+      )}
       {messages.map((message, index) => (
         <Message key={index} {...message} />
       ))}

app/components/Settings.tsx

@@ -37,13 +37,13 @@ export const Settings = () => {
         <input
           className="w-36 mr-2"
           type="range"
-          step={1}
+          step={2}
           min={0}
           max={20}
-          value={settings.maxHistoryLength ?? 5}
+          value={settings.maxHistoryLength}
           onChange={(e) => setSettings({ maxHistoryLength: Number(e.target.value) })}
         />
-        {settings.maxHistoryLength ?? 5}
+        {settings.maxHistoryLength}
       </div>
       <div className="m-4">
         温度：
@@ -115,8 +115,29 @@ export const Settings = () => {
         <input
           className="block px-3 py-2 my-2 w-full border border-gray"
           type="text"
-          value={settings.systemMessage?.content}
-          onChange={(e) => setSettings({ systemMessage: { role: Role.system, content: e.target.value } })}
+          value={settings.systemMessage?.content ?? ''}
+          onChange={(e) => {
+            if (e.target.value === '') {
+              setSettings({ systemMessage: undefined });
+            } else {
+              setSettings({ systemMessage: { role: Role.system, content: e.target.value } });
+            }
+          }}
+        />
+      </div>
+      <div className="m-4">
+        前置消息：
+        <input
+          className="block px-3 py-2 my-2 w-full border border-gray"
+          type="text"
+          value={settings.prefixMessages?.[0].content ?? ''}
+          onChange={(e) => {
+            if (e.target.value === '') {
+              setSettings({ prefixMessages: undefined });
+            } else {
+              setSettings({ prefixMessages: [{ role: Role.user, content: e.target.value }] });
+            }
+          }}
         />
       </div>
       <input className="m-4 mt-0 px-3 py-2" type="button" onClick={() => resetSettings()} value="重置所有配置" />

app/context/ChatContext.tsx

@@ -108,17 +108,21 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
         const fetchApiChatMessages = newMessages
           // 过滤掉 isError 的消息
           .filter((message) => !(message as Message).isError)
-          .slice(-(settings.maxHistoryLength * 2 + 1))
+          .slice(-(settings.maxHistoryLength + 1))
           .map((message) => {
             return isMessage(message) ? message : message.choices[0].message;
           });
+        // 如果有前置消息，则写入到最前面
+        if (settings.prefixMessages && settings.prefixMessages.length > 0) {
+          fetchApiChatMessages.unshift(...settings.prefixMessages);
+        }
         // 如果有系统消息，则写入到最前面
         if (settings.systemMessage) {
           fetchApiChatMessages.unshift(settings.systemMessage);
         }
         // TODO 收到完整消息后，写入 cache 中
         const fullContent = await fetchApiChat({
-          ...omit(settings, 'maxHistoryLength', 'systemMessage', 'availableModels'),
+          ...omit(settings, 'maxHistoryLength', 'systemMessage', 'prefixMessages', 'availableModels'),
           messages: fetchApiChatMessages,
           stream: true,
           onMessage: (content) => {

app/context/SettingsContext.tsx

@@ -11,12 +11,13 @@ import { AllModels, MAX_TOKENS, Model } from '@/utils/constants';
 export interface SettingsState extends Omit<ChatRequest, 'messages'> {
   maxHistoryLength: number;
   systemMessage?: Message;
+  prefixMessages?: Message[];
   availableModels: Model[];
 }
 
 const INITIAL_SETTINGS: SettingsState = {
   model: Model['gpt-3.5-turbo'],
-  maxHistoryLength: 5,
+  maxHistoryLength: 6,
   availableModels: [Model['gpt-3.5-turbo'], Model['gpt-3.5-turbo-0613']],
 };
 

app/utils/message.ts

@@ -4,7 +4,7 @@ import type { ChatResponse, Message } from './constants';
  * 判断传入的 message 是简单的 Message 还是完整的 ChatResponse
  */
 export function isMessage(message: Message | ChatResponse): message is Message {
-  if ((message as Message).content) {
+  if ((message as Message).content !== undefined) {
     return true;
   }
   return false;