Merge remote-tracking branch 'upstream/main'

app/api/common.ts

@@ -20,6 +20,10 @@ export async function requestOpenai(req: NextRequest) {
     baseUrl = `${PROTOCOL}://${baseUrl}`;
   }
 
+  if (baseUrl.endsWith('/')) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
   console.log("[Proxy] ", openaiPath);
   console.log("[Base Url]", baseUrl);
 

app/client/platforms/openai.ts

@@ -13,6 +13,7 @@ import {
   fetchEventSource,
 } from "@fortaine/fetch-event-source";
 import { prettyObject } from "@/app/utils/format";
+import { getClientConfig } from "@/app/config/client";
 
 export interface OpenAIListModelResponse {
   object: string;
@@ -28,13 +29,16 @@ export class ChatGPTApi implements LLMApi {
 
   path(path: string): string {
     let openaiUrl = useAccessStore.getState().openaiUrl;
+    const apiPath = "/api/openai";
+
     if (openaiUrl.length === 0) {
-      openaiUrl = DEFAULT_API_HOST;
+      const isApp = !!getClientConfig()?.isApp;
+      openaiUrl = isApp ? DEFAULT_API_HOST : apiPath;
     }
     if (openaiUrl.endsWith("/")) {
       openaiUrl = openaiUrl.slice(0, openaiUrl.length - 1);
     }
-    if (!openaiUrl.startsWith("http") && !openaiUrl.startsWith("/api/openai")) {
+    if (!openaiUrl.startsWith("http") && !openaiUrl.startsWith(apiPath)) {
       openaiUrl = "https://" + openaiUrl;
     }
     return [openaiUrl, path].join("/");

app/components/auth.tsx

@@ -7,6 +7,8 @@ import { useAccessStore } from "../store";
 import Locale from "../locales";
 
 import BotIcon from "../icons/bot.svg";
+import { useEffect } from "react";
+import { getClientConfig } from "../config/client";
 
 export function AuthPage() {
   const navigate = useNavigate();
@@ -14,6 +16,13 @@ export function AuthPage() {
 
   const goHome = () => navigate(Path.Home);
 
+  useEffect(() => {
+    if (getClientConfig()?.isApp) {
+      navigate(Path.Settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className={styles["auth-page"]}>
       <div className={`no-dark ${styles["auth-logo"]}`}>

app/components/chat.tsx

@@ -940,7 +940,7 @@ function _Chat() {
     const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
     const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
 
-    if (isTouchTopEdge) {
+    if (isTouchTopEdge && !isTouchBottomEdge) {
       setMsgRenderIndex(prevPageMsgIndex);
     } else if (isTouchBottomEdge) {
       setMsgRenderIndex(nextPageMsgIndex);
@@ -1123,9 +1123,9 @@ function _Chat() {
                               10,
                             );
                             chatStore.updateCurrentSession((session) => {
-                              const m = session.messages.find(
-                                (m) => m.id === message.id,
-                              );
+                              const m = session.mask.context
+                                .concat(session.messages)
+                                .find((m) => m.id === message.id);
                               if (m) {
                                 m.content = newMessage;
                               }

app/components/exporter.tsx

@@ -127,7 +127,7 @@ export function MessageExporter() {
   ];
   const { currentStep, setCurrentStepIndex, currentStepIndex } =
     useSteps(steps);
-  const formats = ["text", "image"] as const;
+  const formats = ["text", "image", "json"] as const;
   type ExportFormat = (typeof formats)[number];
 
   const [exportConfig, setExportConfig] = useState({
@@ -157,7 +157,21 @@ export function MessageExporter() {
     session.mask.context,
     selection,
   ]);
-
+  function preview() {
+    if (exportConfig.format === "text") {
+      return (
+        <MarkdownPreviewer messages={selectedMessages} topic={session.topic} />
+      );
+    } else if (exportConfig.format === "json") {
+      return (
+        <JsonPreviewer messages={selectedMessages} topic={session.topic} />
+      );
+    } else {
+      return (
+        <ImagePreviewer messages={selectedMessages} topic={session.topic} />
+      );
+    }
+  }
   return (
     <>
       <Steps
@@ -212,16 +226,7 @@ export function MessageExporter() {
         />
       </div>
       {currentStep.value === "preview" && (
-        <div className={styles["message-exporter-body"]}>
-          {exportConfig.format === "text" ? (
-            <MarkdownPreviewer
-              messages={selectedMessages}
-              topic={session.topic}
-            />
-          ) : (
-            <ImagePreviewer messages={selectedMessages} topic={session.topic} />
-          )}
-        </div>
+        <div className={styles["message-exporter-body"]}>{preview()}</div>
       )}
     </>
   );
@@ -545,12 +550,44 @@ export function MarkdownPreviewer(props: {
   const download = () => {
     downloadAs(mdText, `${props.topic}.md`);
   };
-
   return (
     <>
       <PreviewActions
         copy={copy}
         download={download}
+        showCopy={true}
+        messages={props.messages}
+      />
+      <div className="markdown-body">
+        <pre className={styles["export-content"]}>{mdText}</pre>
+      </div>
+    </>
+  );
+}
+
+export function JsonPreviewer(props: {
+  messages: ChatMessage[];
+  topic: string;
+}) {
+  const msgs = props.messages.map((m) => ({
+    role: m.role,
+    content: m.content,
+  }));
+  const mdText = "\n" + JSON.stringify(msgs, null, 2) + "\n";
+
+  const copy = () => {
+    copyToClipboard(JSON.stringify(msgs, null, 2));
+  };
+  const download = () => {
+    downloadAs(JSON.stringify(msgs, null, 2), `${props.topic}.json`);
+  };
+
+  return (
+    <>
+      <PreviewActions
+        copy={copy}
+        download={download}
+        showCopy={true}
         messages={props.messages}
       />
       <div className="markdown-body">

app/components/home.tsx

@@ -15,7 +15,7 @@ import dynamic from "next/dynamic";
 import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
-import { getLang } from "../locales";
+import { getISOLang, getLang } from "../locales";
 
 import {
   HashRouter as Router,
@@ -86,6 +86,17 @@ export function useSwitchTheme() {
   }, [config.theme]);
 }
 
+function useHtmlLang() {
+  useEffect(() => {
+    const lang = getISOLang();
+    const htmlLang = document.documentElement.lang;
+
+    if (lang !== htmlLang) {
+      document.documentElement.lang = lang;
+    }
+  }, []);
+}
+
 const useHasHydrated = () => {
   const [hasHydrated, setHasHydrated] = useState<boolean>(false);
 
@@ -168,6 +179,7 @@ export function useLoadData() {
 export function Home() {
   useSwitchTheme();
   useLoadData();
+  useHtmlLang();
 
   useEffect(() => {
     console.log("[Config] got config from build time", getClientConfig());

app/components/markdown.tsx

@@ -38,12 +38,6 @@ export function Mermaid(props: { code: string }) {
     if (!svg) return;
     const text = new XMLSerializer().serializeToString(svg);
     const blob = new Blob([text], { type: "image/svg+xml" });
-    console.log(blob);
-    // const url = URL.createObjectURL(blob);
-    // const win = window.open(url);
-    // if (win) {
-    //   win.onload = () => URL.revokeObjectURL(url);
-    // }
     showImageModal(URL.createObjectURL(blob));
   }
 
@@ -152,11 +146,11 @@ export function Markdown(
       className="markdown-body"
       style={{
         fontSize: `${props.fontSize ?? 14}px`,
-        direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",
       }}
       ref={mdRef}
       onContextMenu={props.onContextMenu}
       onDoubleClickCapture={props.onDoubleClickCapture}
+      dir="auto"
     >
       {props.loading ? (
         <LoadingIcon />

app/components/settings.tsx

@@ -529,6 +529,22 @@ export function Settings() {
             ></InputRange>
           </ListItem>
 
+          <ListItem
+            title={Locale.Settings.AutoGenerateTitle.Title}
+            subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.enableAutoGenerateTitle}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.enableAutoGenerateTitle = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
+
           <ListItem
             title={Locale.Settings.SendPreviewBubble.Title}
             subTitle={Locale.Settings.SendPreviewBubble.SubTitle}

app/constant.ts

@@ -41,7 +41,7 @@ export const MAX_SIDEBAR_WIDTH = 500;
 export const MIN_SIDEBAR_WIDTH = 230;
 export const NARROW_SIDEBAR_WIDTH = 100;
 
-export const ACCESS_CODE_PREFIX = "ak-";
+export const ACCESS_CODE_PREFIX = "nk-";
 
 export const LAST_INPUT_KEY = "last-input";
 

app/layout.tsx

@@ -3,7 +3,7 @@ import "./styles/globals.scss";
 import "./styles/markdown.scss";
 import "./styles/highlight.scss";
 import { getClientConfig } from "./config/client";
-import { type Metadata } from 'next';
+import { type Metadata } from "next";
 
 export const metadata = {
   title: "SoulShellGPT",

app/locales/cn.ts

@@ -1,10 +1,14 @@
+import { getClientConfig } from "../config/client";
 import { SubmitKey } from "../store/config";
 
+const isApp = !!getClientConfig()?.isApp;
+
 const cn = {
   WIP: "该功能仍在开发中……",
   Error: {
-    Unauthorized:
-      "访问密码不正确或为空，请前往[登录](/#/auth)页输入正确的访问密码，或者在[设置](/#/settings)页填入你自己的 OpenAI API Key。",
+    Unauthorized: isApp
+      ? "检测到无效 API Key，请前往[设置](/#/settings)页检查 API Key 是否配置正确。"
+      : "访问密码不正确或为空，请前往[登录](/#/auth)页输入正确的访问密码，或者在[设置](/#/settings)页填入你自己的 OpenAI API Key。",
   },
   Auth: {
     Title: "需要密码",
@@ -170,6 +174,10 @@ const cn = {
       Title: "预览气泡",
       SubTitle: "在预览气泡中预览 Markdown 内容",
     },
+    AutoGenerateTitle: {
+      Title: "自动生成标题",
+      SubTitle: "根据对话内容生成合适的标题",
+    },
     Mask: {
       Splash: {
         Title: "面具启动页",

app/locales/en.ts

@@ -1,12 +1,16 @@
+import { getClientConfig } from "../config/client";
 import { SubmitKey } from "../store/config";
 import { LocaleType } from "./index";
 
 // if you are adding a new translation, please use PartialLocaleType instead of LocaleType
+
+const isApp = !!getClientConfig()?.isApp;
 const en: LocaleType = {
   WIP: "Coming Soon...",
   Error: {
-    Unauthorized:
-      "Unauthorized access, please enter access code in [auth](/#/auth) page.",
+    Unauthorized: isApp
+      ? "Invalid API Key, please check it in [Settings](/#/settings) page."
+      : "Unauthorized access, please enter access code in [auth](/#/auth) page, or enter your OpenAI API Key.",
   },
   Auth: {
     Title: "Need Access Code",
@@ -172,6 +176,10 @@ const en: LocaleType = {
       Title: "Send Preview Bubble",
       SubTitle: "Preview markdown in bubble",
     },
+    AutoGenerateTitle: {
+      Title: "Auto Generate Title",
+      SubTitle: "Generate a suitable title based on the conversation content",
+    },
     Mask: {
       Splash: {
         Title: "Mask Splash Screen",

app/locales/index.ts

@@ -116,3 +116,13 @@ export function changeLang(lang: Lang) {
   setItem(LANG_KEY, lang);
   location.reload();
 }
+
+export function getISOLang() {
+  const isoLangString: Record<string, string> = {
+    cn: "zh-Hans",
+    tw: "zh-Hant",
+  };
+
+  const lang = getLang();
+  return isoLangString[lang] ?? lang;
+}

app/store/chat.ts

@@ -479,6 +479,7 @@ export const useChatStore = create<ChatStore>()(
       },
 
       summarizeSession() {
+        const config = useAppConfig.getState();
         const session = get().currentSession();
 
         // remove error messages if any
@@ -487,6 +488,7 @@ export const useChatStore = create<ChatStore>()(
         // should summarize topic after chating more than 50 words
         const SUMMARIZE_MIN_LEN = 50;
         if (
+          config.enableAutoGenerateTitle &&
           session.topic === DEFAULT_TOPIC &&
           countMessages(messages) >= SUMMARIZE_MIN_LEN
         ) {

app/store/config.ts

@@ -26,7 +26,8 @@ export const DEFAULT_CONFIG = {
   fontSize: 14,
   theme: Theme.Auto as Theme,
   tightBorder: !!getClientConfig()?.isApp,
-  sendPreviewBubble: false,
+  sendPreviewBubble: true,
+  enableAutoGenerateTitle: true,
   sidebarWidth: 300,
 
   disablePromptHint: false,
@@ -147,7 +148,7 @@ export const useAppConfig = create<ChatConfigStore>()(
     }),
     {
       name: StoreKey.Config,
-      version: 3.6,
+      version: 3.7,
       migrate(persistedState, version) {
         const state = persistedState as ChatConfig;
 
@@ -170,6 +171,10 @@ export const useAppConfig = create<ChatConfigStore>()(
           state.modelConfig.enableInjectSystemPrompts = true;
         }
 
+        if (version < 3.7) {
+          state.enableAutoGenerateTitle = true;
+        }
+
         return state as any;
       },
     },

app/styles/globals.scss

@@ -105,6 +105,7 @@ body {
   align-items: center;
   user-select: none;
   touch-action: pan-x pan-y;
+  overflow: hidden;
 
   @media only screen and (max-width: 600px) {
     background-color: var(--second);