merge upstream latest

2025-11-25 18:26:48 +08:00 · 2023-04-06 10:47:00 +08:00
parent 9e172812cb 03b3f16472
commit f2528d8fee
40 changed files with 1001 additions and 337 deletions
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -1,14 +1,14 @@
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
 import DeleteIcon from "../icons/delete.svg";
 import styles from "./home.module.scss";
 import BotIcon from "../icons/bot.svg";
 import {
-  Message,
-  SubmitKey,
-  useChatStore,
-  ChatSession,
-  BOT_HELLO,
-} from "../store";
+  DragDropContext,
+  Droppable,
+  Draggable,
+  OnDragEndResponder,
+} from "@hello-pangea/dnd";
+
+import { useChatStore } from "../store";

 import Locale from "../locales";
 import { isMobileScreen } from "../utils";
@@ -20,50 +20,69 @@ export function ChatItem(props: {
  count: number;
  time: string;
  selected: boolean;
+  id: number;
+  index: number;
 }) {
  const [sidebarCollapse] = useChatStore((state) => [state.sidebarCollapse]);
  return sidebarCollapse ? (
-    <div
-      className={`${styles["chat-item-collapse"]} ${
-        props.selected && styles["chat-item-selected"]
-      }`}
-      onClick={props.onClick}
-    >
-      <div className={styles["chat-item-info-collapse"]}>
-        {Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")
-          .length <= 3
-          ? Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")
-          : ":)"}
-      </div>
-      <div
-        className={
-          sidebarCollapse
-            ? styles["chat-item-delete-collapse"]
-            : styles["chat-item-delete"]
-        }
-        onClick={props.onDelete}
-      >
-        <DeleteIcon />
-      </div>
-    </div>
-  ) : (
-    <div
-      className={`${styles["chat-item"]} ${
-        props.selected && styles["chat-item-selected"]
-      }`}
-      onClick={props.onClick}
-    >
-      <div>{props.title}</div>
-      <div className={styles["chat-item-info"]}>
-        <div className={styles["chat-item-count"]}>
-          {Locale.ChatItem.ChatItemCount(props.count)}
+    <Draggable draggableId={`${props.id}`} index={props.index}>
+      {(provided) => (
+        <div
+          className={`${styles["chat-item-collapse"]} ${
+            props.selected && styles["chat-item-selected"]
+          }`}
+          onClick={props.onClick}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          <div className={styles["chat-item-info-collapse"]}>
+            {Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")
+              .length <= 3
+              ? Locale.ChatItem.ChatItemCount(props.count).replace(
+                  /[^0-9]/g,
+                  "",
+                )
+              : ":)"}
+          </div>
+          <div
+            className={
+              sidebarCollapse
+                ? styles["chat-item-delete-collapse"]
+                : styles["chat-item-delete"]
+            }
+            onClick={props.onDelete}
+          >
+            <DeleteIcon />
+          </div>
        </div>
-        <div className={styles["chat-item-date"]}>{props.time}</div>
-      </div>
-      <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
-        <DeleteIcon />
-      </div>
-    </div>
+      )}
+    </Draggable>
+  ) : (
+    <Draggable draggableId={`${props.id}`} index={props.index}>
+      {(provided) => (
+        <div
+          className={`${styles["chat-item"]} ${
+            props.selected && styles["chat-item-selected"]
+          }`}
+          onClick={props.onClick}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          <div className={styles["chat-item-title"]}>{props.title}</div>
+          <div className={styles["chat-item-info"]}>
+            <div className={styles["chat-item-count"]}>
+              {Locale.ChatItem.ChatItemCount(props.count)}
+            </div>
+            <div className={styles["chat-item-date"]}>{props.time}</div>
+          </div>
+          <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
+            <DeleteIcon />
+          </div>
+        </div>
+      )}
+    </Draggable>
  );
 }

@@ -74,32 +93,64 @@ export function ChatList() {
    selectedIndex,
    selectSession,
    removeSession,
+    moveSession,
  ] = useChatStore((state) => [
    state.sidebarCollapse,
    state.sessions,
    state.currentSessionIndex,
    state.selectSession,
    state.removeSession,
+    state.moveSession,
  ]);
+  const onDragEnd: OnDragEndResponder = (result: any) => {
+    const { destination, source } = result;
+    if (!destination) {
+      return;
+    }
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+    moveSession(source.index, destination.index);
+  };
+
  return (
    <>
      <div className={styles["gpt-logo-collapse"]}>
        {sidebarCollapse ? <BotIcon /> : null}
      </div>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="chat-list">
+          {(provided: any) => (
+            <div
+              className={styles["chat-list"]}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {sessions.map((item, i) => (
+                <ChatItem
+                  title={item.topic}
+                  time={item.lastUpdate}
+                  count={item.messages.length}
+                  key={item.id}
+                  id={item.id}
+                  index={i}
+                  selected={i === selectedIndex}
+                  onClick={() => selectSession(i)}
+                  onDelete={() =>
+                    (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) &&
+                    removeSession(i)
+                  }
+                />
+              ))}

-      <div className={styles["chat-list"]}>
-        {sessions.map((item, i) => (
-          <ChatItem
-            title={item.topic}
-            time={item.lastUpdate}
-            count={item.messages.length}
-            key={i}
-            selected={i === selectedIndex}
-            onClick={() => selectSession(i)}
-            onDelete={() => confirm(Locale.Home.DeleteChat) && removeSession(i)}
-          />
-        ))}
-      </div>
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
    </>
  );
 }
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -63,6 +63,14 @@
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .memory-prompt-action {
+      display: flex;
+      align-items: center;
+    }
  }

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

 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
@@ -12,11 +12,19 @@ import BotIcon from "../icons/bot.svg";
 import AddIcon from "../icons/add.svg";
 import DeleteIcon from "../icons/delete.svg";

-import { Message, SubmitKey, useChatStore, BOT_HELLO, ROLES } from "../store";
+import {
+  Message,
+  SubmitKey,
+  useChatStore,
+  BOT_HELLO,
+  ROLES,
+  createMessage,
+} from "../store";

 import {
  copyToClipboard,
  downloadAs,
+  getEmojiUrl,
  isMobileScreen,
  selectOrCopy,
 } from "../utils";
@@ -31,11 +39,14 @@ import { IconButton } from "./button";
 import styles from "./home.module.scss";
 import chatStyle from "./chat.module.scss";

-import { Modal, showModal, showToast } from "./ui-lib";
+import { Input, Modal, showModal, showToast } from "./ui-lib";

-const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
-  loading: () => <LoadingIcon />,
-});
+const Markdown = dynamic(
+  async () => memo((await import("./markdown")).Markdown),
+  {
+    loading: () => <LoadingIcon />,
+  },
+);

 const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
  loading: () => <LoadingIcon />,
@@ -50,7 +61,7 @@ export function Avatar(props: { role: Message["role"] }) {

  return (
    <div className={styles["user-avtar"]}>
-      <Emoji unified={config.avatar} size={18} />
+      <Emoji unified={config.avatar} size={18} getEmojiUrl={getEmojiUrl} />
    </div>
  );
 }
@@ -140,6 +151,16 @@ function PromptToast(props: {
            title={Locale.Context.Edit}
            onClose={() => props.setShowModal(false)}
            actions={[
+              <IconButton
+                key="reset"
+                icon={<CopyIcon />}
+                bordered
+                text={Locale.Memory.Reset}
+                onClick={() =>
+                  confirm(Locale.Memory.ResetConfirm) &&
+                  chatStore.resetSession()
+                }
+              />,
              <IconButton
                key="copy"
                icon={<CopyIcon />}
@@ -150,7 +171,6 @@ function PromptToast(props: {
            ]}
          >
            <>
-              {" "}
              <div className={chatStyle["context-prompt"]}>
                {context.map((c, i) => (
                  <div className={chatStyle["context-prompt-row"]} key={i}>
@@ -170,17 +190,18 @@ function PromptToast(props: {
                        </option>
                      ))}
                    </select>
-                    <input
+                    <Input
                      value={c.content}
                      type="text"
                      className={chatStyle["context-content"]}
-                      onChange={(e) =>
+                      rows={1}
+                      onInput={(e) =>
                        updateContextPrompt(i, {
                          ...c,
-                          content: e.target.value as any,
+                          content: e.currentTarget.value as any,
                        })
                      }
-                    ></input>
+                    />
                    <IconButton
                      icon={<DeleteIcon />}
                      className={chatStyle["context-delete-button"]}
@@ -208,8 +229,24 @@ function PromptToast(props: {
              </div>
              <div className={chatStyle["memory-prompt"]}>
                <div className={chatStyle["memory-prompt-title"]}>
-                  {Locale.Memory.Title} ({session.lastSummarizeIndex} of{" "}
-                  {session.messages.length})
+                  <span>
+                    {Locale.Memory.Title} ({session.lastSummarizeIndex} of{" "}
+                    {session.messages.length})
+                  </span>
+
+                  <label className={chatStyle["memory-prompt-action"]}>
+                    {Locale.Memory.Send}
+                    <input
+                      type="checkbox"
+                      checked={session.sendMemory}
+                      onChange={() =>
+                        chatStore.updateCurrentSession(
+                          (session) =>
+                            (session.sendMemory = !session.sendMemory),
+                        )
+                      }
+                    ></input>
+                  </label>
                </div>
                <div className={chatStyle["memory-prompt-content"]}>
                  {session.memoryPrompt || Locale.Memory.EmptyContent}
@@ -378,8 +415,8 @@ export function Chat(props: {}) {
  };

  // stop response
-  const onUserStop = (messageIndex: number) => {
-    ControllerPool.stop(sessionIndex, messageIndex);
+  const onUserStop = (messageId: number) => {
+    ControllerPool.stop(sessionIndex, messageId);
  };

  // check if should send message
@@ -409,6 +446,9 @@ export function Chat(props: {}) {
        chatStore
          .onUserInput(messages[i].content)
          .then(() => setIsLoading(false));
+        chatStore.updateCurrentSession((session) =>
+          session.messages.splice(i, 2),
+        );
        inputRef.current?.focus();
        return;
      }
@@ -433,9 +473,10 @@ export function Chat(props: {}) {
      isLoading
        ? [
            {
-              role: "assistant",
-              content: "……",
-              date: new Date().toLocaleString(),
+              ...createMessage({
+                role: "assistant",
+                content: "……",
+              }),
              preview: true,
            },
          ]
@@ -445,9 +486,10 @@ export function Chat(props: {}) {
      userInput.length > 0 && config.sendPreviewBubble
        ? [
            {
-              role: "user",
-              content: userInput,
-              date: new Date().toLocaleString(),
+              ...createMessage({
+                role: "user",
+                content: userInput,
+              }),
              preview: true,
            },
          ]
@@ -461,7 +503,6 @@ export function Chat(props: {}) {
    if (sidebarCollapse && isMobileScreen()) return;
    inputRef.current?.focus();
  }, [sidebarCollapse]);
-
  return (
    <div className={styles.chat} key={session.id}>
      <div className={styles["window-header"]}>
@@ -562,7 +603,7 @@ export function Chat(props: {}) {
                        {message.streaming ? (
                          <div
                            className={styles["chat-message-top-action"]}
-                            onClick={() => onUserStop(i)}
+                            onClick={() => onUserStop(message.id ?? i)}
                          >
                            {Locale.Chat.Actions.Stop}
                          </div>
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -191,7 +191,7 @@
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: var(--card-shadow);
-  transition: all 0.3s ease;
+  transition: background-color 0.3s ease;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -19,7 +19,6 @@ import RightIcon from "../icons/right.svg";
 import { Message, SubmitKey, useChatStore } from "../store";
 import { isMobileScreen } from "../utils";
 import Locale from "../locales";
-import { ChatList } from "./chat-list";
 import { Chat } from "./chat";

 import dynamic from "next/dynamic";
@@ -41,72 +40,10 @@ const Settings = dynamic(async () => (await import("./settings")).Settings, {
  loading: () => <Loading noLogo />,
 });

-const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
-  loading: () => <LoadingIcon />,
+const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
+  loading: () => <Loading noLogo />,
 });

-export function Avatar(props: { role: Message["role"] }) {
-  const config = useChatStore((state) => state.config);
-
-  if (props.role === "assistant") {
-    return <BotIcon className={styles["user-avtar"]} />;
-  }
-
-  return (
-    <div className={styles["user-avtar"]}>
-      <Emoji unified={config.avatar} size={18} />
-    </div>
-  );
-}
-
-function useSubmitHandler() {
-  const config = useChatStore((state) => state.config);
-  const submitKey = config.submitKey;
-
-  const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key !== "Enter") return false;
-    if (e.key === "Enter" && e.nativeEvent.isComposing) return false;
-    return (
-      (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
-      (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
-      (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
-      (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
-      (config.submitKey === SubmitKey.Enter &&
-        !e.altKey &&
-        !e.ctrlKey &&
-        !e.shiftKey &&
-        !e.metaKey)
-    );
-  };
-
-  return {
-    submitKey,
-    shouldSubmit,
-  };
-}
-
-export function PromptHints(props: {
-  prompts: Prompt[];
-  onPromptSelect: (prompt: Prompt) => void;
-}) {
-  if (props.prompts.length === 0) return null;
-
-  return (
-    <div className={styles["prompt-hints"]}>
-      {props.prompts.map((prompt, i) => (
-        <div
-          className={styles["prompt-hint"]}
-          key={prompt.title + i.toString()}
-          onClick={() => props.onPromptSelect(prompt)}
-        >
-          <div className={styles["hint-title"]}>{prompt.title}</div>
-          <div className={styles["hint-content"]}>{prompt.content}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function useSwitchTheme() {
  const config = useChatStore((state) => state.config);

--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -26,7 +26,7 @@ import {
 import { Avatar } from "./chat";

 import Locale, { AllLangs, changeLang, getLang } from "../locales";
-import { getCurrentVersion } from "../utils";
+import { getCurrentVersion, getEmojiUrl } from "../utils";
 import Link from "next/link";
 import { UPDATE_URL } from "../constant";
 import { SearchService, usePromptStore } from "../store/prompt";
@@ -96,26 +96,18 @@ export function Settings(props: { closeSettings: () => void }) {

  const [usage, setUsage] = useState<{
    used?: number;
+    subscription?: number;
  }>();
  const [loadingUsage, setLoadingUsage] = useState(false);
  function checkUsage() {
    setLoadingUsage(true);
    requestUsage()
-      .then((res) =>
-        setUsage({
-          used: res,
-        }),
-      )
+      .then((res) => setUsage(res))
      .finally(() => {
        setLoadingUsage(false);
      });
  }

-  useEffect(() => {
-    checkUpdate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
  const accessStore = useAccessStore();
  const enabledAccessControl = useMemo(
    () => accessStore.enabledAccessControl(),
@@ -127,12 +119,13 @@ export function Settings(props: { closeSettings: () => void }) {
  const builtinCount = SearchService.count.builtin;
  const customCount = promptStore.prompts.size ?? 0;

-  const showUsage = accessStore.token !== "";
+  const showUsage = !!accessStore.token || !!accessStore.accessCode;
+
  useEffect(() => {
-    if (showUsage) {
-      checkUsage();
-    }
-  }, [showUsage]);
+    checkUpdate();
+    showUsage && checkUsage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  return (
    <ErrorBoundary>
@@ -181,6 +174,7 @@ export function Settings(props: { closeSettings: () => void }) {
                <EmojiPicker
                  lazyLoadEmojis
                  theme={EmojiTheme.AUTO}
+                  getEmojiUrl={getEmojiUrl}
                  onEmojiClick={(e) => {
                    updateConfig((config) => (config.avatar = e.unified));
                    setShowEmojiPicker(false);
@@ -391,7 +385,10 @@ export function Settings(props: { closeSettings: () => void }) {
              showUsage
                ? loadingUsage
                  ? Locale.Settings.Usage.IsChecking
-                  : Locale.Settings.Usage.SubTitle(usage?.used ?? "[?]")
+                  : Locale.Settings.Usage.SubTitle(
+                      usage?.used ?? "[?]",
+                      usage?.subscription ?? "[?]",
+                    )
                : Locale.Settings.Usage.NoAccess
            }
          >
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -141,6 +141,16 @@
  }
 }

+.input {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  padding: 10px;
+  font-family: inherit;
+  background-color: var(--white);
+  color: var(--black);
+  resize: none;
+}
+
@media only screen and (max-width: 600px) {
  .modal-container {
    width: 90vw;
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -2,6 +2,7 @@ import styles from "./ui-lib.module.scss";
 import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 import { createRoot } from "react-dom/client";
+import React from "react";

 export function Popover(props: {
  children: JSX.Element;
@@ -140,3 +141,17 @@ export function showToast(content: string, delay = 3000) {

  root.render(<Toast content={content} />);
 }
+
+export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {
+  autoHeight?: boolean;
+  rows?: number;
+};
+
+export function Input(props: InputProps) {
+  return (
+    <textarea
+      {...props}
+      className={`${styles["input"]} ${props.className}`}
+    ></textarea>
+  );
+}
--- a/app/components/window.scss
+++ b/app/components/window.scss
@@ -10,6 +10,7 @@

 .window-header-title {
  max-width: calc(100% - 100px);
+  overflow: hidden;

  .window-header-main-title {
    font-size: 20px;