Merge remote-tracking branch 'upstream/main'

2025-11-18 06:53:41 +08:00 · 2023-06-24 12:19:38 +08:00
parent a2325c85bc c636993989
commit 07172e06c7
79 changed files with 1831 additions and 544 deletions
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -25,7 +25,7 @@ export function AuthPage() {

      <input
        className={styles["auth-input"]}
-        type="text"
+        type="password"
        placeholder={Locale.Auth.Input}
        value={access.accessCode}
        onChange={(e) => {
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -72,9 +72,7 @@ export function ChatItem(props: {
                <div className={styles["chat-item-count"]}>
                  {Locale.ChatItem.ChatItemCount(props.count)}
                </div>
-                <div className={styles["chat-item-date"]}>
-                  {new Date(props.time).toLocaleString()}
-                </div>
+                <div className={styles["chat-item-date"]}>{props.time}</div>
              </div>
            </>
          )}
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -17,10 +17,38 @@
    transition: all ease 0.3s;
    margin-bottom: 10px;
    align-items: center;
+    height: 16px;
+    width: var(--icon-width);

    &:not(:last-child) {
      margin-right: 5px;
    }
+
+    .text {
+      white-space: nowrap;
+      padding-left: 5px;
+      opacity: 0;
+      transform: translateX(-5px);
+      transition: all ease 0.3s;
+      transition-delay: 0.1s;
+      pointer-events: none;
+    }
+
+    &:hover {
+      width: var(--full-width);
+
+      .text {
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
+    .text,
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
  }
 }

--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1,5 +1,11 @@
 import { useDebouncedCallback } from "use-debounce";
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+} from "react";

 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
@@ -61,6 +67,7 @@ import { useMaskStore } from "../store/mask";
 import { useCommand } from "../command";
 import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
+import { getClientConfig } from "../config/client";

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
@@ -279,6 +286,57 @@ function ClearContextDivider() {
  );
 }

+function ChatAction(props: {
+  text: string;
+  icon: JSX.Element;
+  onClick: () => void;
+}) {
+  const iconRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState({
+    full: 20,
+    icon: 20,
+  });
+
+  function updateWidth() {
+    if (!iconRef.current || !textRef.current) return;
+    const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
+    const textWidth = getWidth(textRef.current);
+    const iconWidth = getWidth(iconRef.current);
+    setWidth({
+      full: textWidth + iconWidth,
+      icon: iconWidth,
+    });
+  }
+
+  useEffect(() => {
+    updateWidth();
+  }, []);
+
+  return (
+    <div
+      className={`${chatStyle["chat-input-action"]} clickable`}
+      onClick={() => {
+        props.onClick();
+        setTimeout(updateWidth, 1);
+      }}
+      style={
+        {
+          "--icon-width": `${width.icon}px`,
+          "--full-width": `${width.full}px`,
+        } as React.CSSProperties
+      }
+    >
+      <div ref={iconRef} className={chatStyle["icon"]}>
+        {props.icon}
+      </div>
+      <div className={chatStyle["text"]} ref={textRef}>
+        {props.text}
+      </div>
+    </div>
+  );
+}
+
 function useScrollToBottom() {
  // for auto-scroll
  const scrollRef = useRef<HTMLDivElement>(null);
@@ -330,61 +388,60 @@ export function ChatActions(props: {
  return (
    <div className={chatStyle["chat-input-actions"]}>
      {couldStop && (
-        <div
-          className={`${chatStyle["chat-input-action"]} clickable`}
+        <ChatAction
          onClick={stopAll}
-        >
-          <StopIcon />
-        </div>
+          text={Locale.Chat.InputActions.Stop}
+          icon={<StopIcon />}
+        />
      )}
      {!props.hitBottom && (
-        <div
-          className={`${chatStyle["chat-input-action"]} clickable`}
+        <ChatAction
          onClick={props.scrollToBottom}
-        >
-          <BottomIcon />
-        </div>
+          text={Locale.Chat.InputActions.ToBottom}
+          icon={<BottomIcon />}
+        />
      )}
      {props.hitBottom && (
-        <div
-          className={`${chatStyle["chat-input-action"]} clickable`}
+        <ChatAction
          onClick={props.showPromptModal}
-        >
-          <SettingsIcon />
-        </div>
+          text={Locale.Chat.InputActions.Settings}
+          icon={<SettingsIcon />}
+        />
      )}

-      <div
-        className={`${chatStyle["chat-input-action"]} clickable`}
+      <ChatAction
        onClick={nextTheme}
-      >
-        {theme === Theme.Auto ? (
-          <AutoIcon />
-        ) : theme === Theme.Light ? (
-          <LightIcon />
-        ) : theme === Theme.Dark ? (
-          <DarkIcon />
-        ) : null}
-      </div>
+        text={Locale.Chat.InputActions.Theme[theme]}
+        icon={
+          <>
+            {theme === Theme.Auto ? (
+              <AutoIcon />
+            ) : theme === Theme.Light ? (
+              <LightIcon />
+            ) : theme === Theme.Dark ? (
+              <DarkIcon />
+            ) : null}
+          </>
+        }
+      />

-      <div
-        className={`${chatStyle["chat-input-action"]} clickable`}
+      <ChatAction
        onClick={props.showPromptHints}
-      >
-        <PromptIcon />
-      </div>
+        text={Locale.Chat.InputActions.Prompt}
+        icon={<PromptIcon />}
+      />

-      <div
-        className={`${chatStyle["chat-input-action"]} clickable`}
+      <ChatAction
        onClick={() => {
          navigate(Path.Masks);
        }}
-      >
-        <MaskIcon />
-      </div>
+        text={Locale.Chat.InputActions.Masks}
+        icon={<MaskIcon />}
+      />

-      <div
-        className={`${chatStyle["chat-input-action"]} clickable`}
+      <ChatAction
+        text={Locale.Chat.InputActions.Clear}
+        icon={<BreakIcon />}
        onClick={() => {
          chatStore.updateCurrentSession((session) => {
            if (session.clearContextIndex === session.messages.length) {
@@ -395,9 +452,7 @@ export function ChatActions(props: {
            }
          });
        }}
-      >
-        <BreakIcon />
-      </div>
+      />
    </div>
  );
 }
@@ -425,7 +480,7 @@ export function Chat() {
  const navigate = useNavigate();

  const onChatBodyScroll = (e: HTMLElement) => {
-    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 100;
+    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 10;
    setHitBottom(isTouchBottom);
  };

@@ -656,9 +711,13 @@ export function Chat() {
    }
  };

+  const clientConfig = useMemo(() => getClientConfig(), []);
+
  const location = useLocation();
  const isChat = location.pathname === Path.Chat;
+
  const autoFocus = !isMobileScreen || isChat; // only focus in chat page
+  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;

  useCommand({
    fill: setUserInput,
@@ -669,7 +728,7 @@ export function Chat() {

  return (
    <div className={styles.chat} key={session.id}>
-      <div className="window-header">
+      <div className="window-header" data-tauri-drag-region>
        <div className="window-header-title">
          <div
            className={`window-header-main-title " ${styles["chat-body-title"]}`}
@@ -707,7 +766,7 @@ export function Chat() {
              }}
            />
          </div>
-          {!isMobileScreen && (
+          {showMaxIcon && (
            <div className="window-action-button">
              <IconButton
                icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
@@ -868,6 +927,9 @@ export function Chat() {
            onBlur={() => setAutoScroll(false)}
            rows={inputRows}
            autoFocus={autoFocus}
+            style={{
+              fontSize: config.fontSize,
+            }}
          />
          <IconButton
            icon={<SendWhiteIcon />}
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -449,16 +449,16 @@ export function ImagePreviewer(props: {
          </div>
          <div>
            <div className={styles["chat-info-item"]}>
-              Model: {mask.modelConfig.model}
+              {Locale.Exporter.Model}: {mask.modelConfig.model}
            </div>
            <div className={styles["chat-info-item"]}>
-              Messages: {props.messages.length}
+              {Locale.Exporter.Messages}: {props.messages.length}
            </div>
            <div className={styles["chat-info-item"]}>
-              Topic: {session.topic}
+              {Locale.Exporter.Topic}: {session.topic}
            </div>
            <div className={styles["chat-info-item"]}>
-              Time:{" "}
+              {Locale.Exporter.Time}:{" "}
              {new Date(
                props.messages.at(-1)?.date ?? Date.now(),
              ).toLocaleString()}
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -24,6 +24,7 @@ import {
 import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
+import { getClientConfig } from "../config/client";

 export function Loading(props: { noLogo?: boolean }) {
  return (
@@ -93,9 +94,14 @@ const useHasHydrated = () => {

 const loadAsyncGoogleFont = () => {
  const linkEl = document.createElement("link");
+  const proxyFontUrl = "/google-fonts";
+  const remoteFontUrl = "https://fonts.googleapis.com";
+  const googleFontUrl =
+    getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
  linkEl.rel = "stylesheet";
  linkEl.href =
-    "/google-fonts/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap";
+    googleFontUrl +
+    "/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap";
  document.head.appendChild(linkEl);
 };

@@ -147,6 +153,10 @@ function Screen() {
 export function Home() {
  useSwitchTheme();

+  useEffect(() => {
+    console.log("[Config] got config from build time", getClientConfig());
+  }, []);
+
  if (!useHasHydrated()) {
    return <Loading />;
  }
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -11,18 +11,21 @@ import mermaid from "mermaid";

 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
+import { useDebouncedCallback, useThrottledCallback } from "use-debounce";

-export function Mermaid(props: { code: string; onError: () => void }) {
+export function Mermaid(props: { code: string }) {
  const ref = useRef<HTMLDivElement>(null);
+  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    if (props.code && ref.current) {
      mermaid
        .run({
          nodes: [ref.current],
+          suppressErrors: true,
        })
        .catch((e) => {
-          props.onError();
+          setHasError(true);
          console.error("[Mermaid] ", e.message);
        });
    }
@@ -41,10 +44,17 @@ export function Mermaid(props: { code: string; onError: () => void }) {
    }
  }

+  if (hasError) {
+    return null;
+  }
+
  return (
    <div
-      className="no-dark"
-      style={{ cursor: "pointer", overflow: "auto" }}
+      className="no-dark mermaid"
+      style={{
+        cursor: "pointer",
+        overflow: "auto",
+      }}
      ref={ref}
      onClick={() => viewSvgInNewWindow()}
    >
@@ -55,33 +65,40 @@ export function Mermaid(props: { code: string; onError: () => void }) {

 export function PreCode(props: { children: any }) {
  const ref = useRef<HTMLPreElement>(null);
+  const refText = ref.current?.innerText;
  const [mermaidCode, setMermaidCode] = useState("");

-  useEffect(() => {
+  const renderMermaid = useDebouncedCallback(() => {
    if (!ref.current) return;
    const mermaidDom = ref.current.querySelector("code.language-mermaid");
    if (mermaidDom) {
      setMermaidCode((mermaidDom as HTMLElement).innerText);
    }
-  }, [props.children]);
+  }, 600);

-  if (mermaidCode) {
-    return <Mermaid code={mermaidCode} onError={() => setMermaidCode("")} />;
-  }
+  useEffect(() => {
+    setTimeout(renderMermaid, 1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refText]);

  return (
-    <pre ref={ref}>
-      <span
-        className="copy-code-button"
-        onClick={() => {
-          if (ref.current) {
-            const code = ref.current.innerText;
-            copyToClipboard(code);
-          }
-        }}
-      ></span>
-      {props.children}
-    </pre>
+    <>
+      {mermaidCode.length > 0 && (
+        <Mermaid code={mermaidCode} key={mermaidCode} />
+      )}
+      <pre ref={ref}>
+        <span
+          className="copy-code-button"
+          onClick={() => {
+            if (ref.current) {
+              const code = ref.current.innerText;
+              copyToClipboard(code);
+            }
+          }}
+        ></span>
+        {props.children}
+      </pre>
+    </>
  );
 }

@@ -127,43 +144,57 @@ export function Markdown(
 ) {
  const mdRef = useRef<HTMLDivElement>(null);
  const renderedHeight = useRef(0);
+  const renderedWidth = useRef(0);
  const inView = useRef(!!props.defaultShow);
+  const [_, triggerRender] = useState(0);
+  const checkInView = useThrottledCallback(
+    () => {
+      const parent = props.parentRef?.current;
+      const md = mdRef.current;
+      if (parent && md && !props.defaultShow) {
+        const parentBounds = parent.getBoundingClientRect();
+        const twoScreenHeight = Math.max(500, parentBounds.height * 2);
+        const mdBounds = md.getBoundingClientRect();
+        const parentTop = parentBounds.top - twoScreenHeight;
+        const parentBottom = parentBounds.bottom + twoScreenHeight;
+        const isOverlap =
+          Math.max(parentTop, mdBounds.top) <=
+          Math.min(parentBottom, mdBounds.bottom);
+        inView.current = isOverlap;
+        triggerRender(Date.now());
+      }

-  const parent = props.parentRef?.current;
-  const md = mdRef.current;
+      if (inView.current && md) {
+        const rect = md.getBoundingClientRect();
+        renderedHeight.current = Math.max(renderedHeight.current, rect.height);
+        renderedWidth.current = Math.max(renderedWidth.current, rect.width);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    300,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );

-  const checkInView = () => {
-    if (parent && md) {
-      const parentBounds = parent.getBoundingClientRect();
-      const twoScreenHeight = Math.max(500, parentBounds.height * 2);
-      const mdBounds = md.getBoundingClientRect();
-      const parentTop = parentBounds.top - twoScreenHeight;
-      const parentBottom = parentBounds.bottom + twoScreenHeight;
-      const isOverlap =
-        Math.max(parentTop, mdBounds.top) <=
-        Math.min(parentBottom, mdBounds.bottom);
-      inView.current = isOverlap;
-    }
+  useEffect(() => {
+    props.parentRef?.current?.addEventListener("scroll", checkInView);
+    checkInView();
+    return () =>
+      props.parentRef?.current?.removeEventListener("scroll", checkInView);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

-    if (inView.current && md) {
-      renderedHeight.current = Math.max(
-        renderedHeight.current,
-        md.getBoundingClientRect().height,
-      );
-    }
-  };
-
-  setTimeout(() => checkInView(), 1);
+  const getSize = (x: number) => (!inView.current && x > 0 ? x : "auto");

  return (
    <div
      className="markdown-body"
      style={{
        fontSize: `${props.fontSize ?? 14}px`,
-        height:
-          !inView.current && renderedHeight.current > 0
-            ? renderedHeight.current
-            : "auto",
+        height: getSize(renderedHeight.current),
+        width: getSize(renderedWidth.current),
      }}
      ref={mdRef}
      onContextMenu={props.onContextMenu}
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -185,7 +185,12 @@ function ContextPromptItem(props: {
        className={chatStyle["context-content"]}
        rows={focusingInput ? 5 : 1}
        onFocus={() => setFocusingInput(true)}
-        onBlur={() => setFocusingInput(false)}
+        onBlur={() => {
+          setFocusingInput(false);
+          // If the selection is not removed when the user loses focus, some
+          // extensions like "Translate" will always display a floating bar
+          window?.getSelection()?.removeAllRanges();
+        }}
        onInput={(e) =>
          props.update({
            ...props.prompt,
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -2,7 +2,7 @@ import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";

 import Locale from "../locales";
 import { InputRange } from "./input-range";
-import { List, ListItem, Select } from "./ui-lib";
+import { ListItem, Select } from "./ui-lib";

 export function ModelConfigList(props: {
  modelConfig: ModelConfig;
@@ -88,6 +88,42 @@ export function ModelConfigList(props: {
        ></InputRange>
      </ListItem>

+      <ListItem
+        title={Locale.Settings.FrequencyPenalty.Title}
+        subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.frequency_penalty?.toFixed(1)}
+          min="-2"
+          max="2"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.frequency_penalty =
+                  ModalConfigValidator.frequency_penalty(
+                    e.currentTarget.valueAsNumber,
+                  )),
+            );
+          }}
+        ></InputRange>
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.InputTemplate.Title}
+        subTitle={Locale.Settings.InputTemplate.SubTitle}
+      >
+        <input
+          type="text"
+          value={props.modelConfig.template}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.template = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+
      <ListItem
        title={Locale.Settings.HistoryCount.Title}
        subTitle={Locale.Settings.HistoryCount.SubTitle}
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, HTMLProps, useRef } from "react";
+import { useState, useEffect, useMemo } from "react";

 import styles from "./settings.module.scss";

@@ -45,6 +45,7 @@ import { ErrorBoundary } from "./error";
 import { InputRange } from "./input-range";
 import { useNavigate } from "react-router-dom";
 import { Avatar, AvatarPicker } from "./emoji";
+import { getClientConfig } from "../config/client";

 function EditPromptModal(props: { id: number; onClose: () => void }) {
  const promptStore = usePromptStore();
@@ -285,9 +286,12 @@ export function Settings() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  const clientConfig = useMemo(() => getClientConfig(), []);
+  const showAccessCode = enabledAccessControl && !clientConfig?.isApp;
+
  return (
    <ErrorBoundary>
-      <div className="window-header">
+      <div className="window-header" data-tauri-drag-region>
        <div className="window-header-title">
          <div className="window-header-main-title">
            {Locale.Settings.Title}
@@ -484,7 +488,7 @@ export function Settings() {
        </List>

        <List>
-          {enabledAccessControl ? (
+          {showAccessCode ? (
            <ListItem
              title={Locale.Settings.AccessCode.Title}
              subTitle={Locale.Settings.AccessCode.SubTitle}
@@ -541,6 +545,21 @@ export function Settings() {
              />
            )}
          </ListItem>
+
+          {!accessStore.hideUserApiKey ? (
+            <ListItem
+              title={Locale.Settings.Endpoint.Title}
+              subTitle={Locale.Settings.Endpoint.SubTitle}
+            >
+              <input
+                type="text"
+                value={accessStore.openaiUrl}
+                onChange={(e) =>
+                  accessStore.updateOpenAiUrl(e.currentTarget.value)
+                }
+              ></input>
+            </ListItem>
+          ) : null}
        </List>

        <List>
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -118,8 +118,10 @@ export function SideBar(props: { className?: string }) {
        shouldNarrow && styles["narrow-sidebar"]
      }`}
    >
-      <div className={styles["sidebar-header"]}>
-        <div className={styles["sidebar-title"]}>SoulShellGPT</div>
+      <div className={styles["sidebar-header"]} data-tauri-drag-region>
+        <div className={styles["sidebar-title"]} data-tauri-drag-region>
+          SoulShellGPT
+        </div>
        <div className={styles["sidebar-sub-title"]}>
          有温度的AI助理
        </div>