support example_user and example_assistant

src/app.tsx

@@ -11,6 +11,7 @@ import CHATGPT_API_WEB_VERSION from "./CHATGPT_API_WEB_VERSION";
 export interface ChatStoreMessage extends Message {
   hide: boolean;
   token: number;
+  example: boolean;
 }
 
 export interface ChatStore {

src/chatbox.tsx

@@ -132,6 +132,7 @@ export default function ChatBOX(props: {
           content,
           hide: false,
           token: responseTokenCount,
+          example: false,
         });
         // manually copy status from client to chatStore
         chatStore.maxTokens = client.max_tokens;
@@ -182,6 +183,7 @@ export default function ChatBOX(props: {
       content,
       hide: false,
       token: data.usage.completion_tokens ?? calculate_token_length(content),
+      example: false,
     });
     setShowGenerating(false);
   };
@@ -201,7 +203,14 @@ export default function ChatBOX(props: {
       .filter(({ hide }) => !hide)
       .slice(chatStore.postBeginIndex)
       // only copy content and role attribute to client for posting
-      .map(({ content, role }) => {
+      .map(({ content, role, example }) => {
+        if (example) {
+          return {
+            content,
+            role: "system",
+            name: role === "assistant" ? "example_assistant" : "example_user",
+          };
+        }
         return {
           content,
           role,
@@ -251,6 +260,7 @@ export default function ChatBOX(props: {
       content: inputMsg.trim(),
       hide: false,
       token: calculate_token_length(inputMsg.trim()),
+      example: false,
     });
     // manually calculate token length
     chatStore.totalTokens += client.calculate_token_length(inputMsg.trim());
@@ -472,6 +482,7 @@ export default function ChatBOX(props: {
                 content: inputMsg,
                 token: calculate_token_length(inputMsg),
                 hide: false,
+                example: false,
               });
               update_total_tokens();
               setChatStore({ ...chatStore });
@@ -490,6 +501,7 @@ export default function ChatBOX(props: {
                 content: inputMsg,
                 token: calculate_token_length(inputMsg),
                 hide: false,
+                example: false,
               });
               update_total_tokens();
               setChatStore({ ...chatStore });

src/chatgpt.ts

@@ -1,6 +1,7 @@
 export interface Message {
   role: "system" | "user" | "assistant" | "function";
   content: string;
+  name?: "example_user" | "example_assistant";
 }
 
 export interface ChunkMessage {

src/message.tsx

@@ -157,6 +157,17 @@ export default function Message(props: Props) {
                   </div>
                 </div>
               )}
+              <span>
+                <label>example</label>
+                <input
+                  type="checkbox"
+                  checked={chat.example}
+                  onChange={(event: any) => {
+                    chat.example = event.target.checked;
+                    setChatStore({ ...chatStore });
+                  }}
+                />
+              </span>
             </div>
           )}
         </div>