Merge branch 'main' of https://github.com/mm7894215/ChatGPT-Next-Web-1

2025-11-25 18:26:48 +08:00 · 2023-04-07 15:56:18 +08:00
parent c2385825f6 54dbba7d4e
commit 130a946e6b
25 changed files with 481 additions and 83 deletions
--- a/app/api/openai/route.ts
+++ b/app/api/openai/route.ts
@@ -6,6 +6,7 @@ async function makeRequest(req: NextRequest) {
    const api = await requestOpenai(req);
    const res = new NextResponse(api.body);
    res.headers.set("Content-Type", "application/json");
+    res.headers.set("Cache-Control", "no-cache");
    return res;
  } catch (e) {
    console.error("[OpenAI] ", req.body, e);
@@ -16,7 +17,7 @@ async function makeRequest(req: NextRequest) {
      },
      {
        status: 500,
-      },
+      }
    );
  }
 }
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -10,6 +10,14 @@
  transition: all 0.3s ease;
  overflow: hidden;
  user-select: none;
+  outline: none;
+  border: none;
+  color: var(--black);
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }

 .shadow {
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -11,9 +11,10 @@ export function IconButton(props: {
  noDark?: boolean;
  className?: string;
  title?: string;
+  disabled?: boolean;
 }) {
  return (
-    <div
+    <button
      className={
        styles["icon-button"] +
        ` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
@@ -22,6 +23,7 @@ export function IconButton(props: {
      }
      onClick={props.onClick}
      title={props.title}
+      disabled={props.disabled}
      role="button"
    >
      <div
@@ -32,6 +34,6 @@ export function IconButton(props: {
      {props.text && (
        <div className={styles["icon-button-text"]}>{props.text}</div>
      )}
-    </div>
+    </button>
  );
 }
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -59,6 +59,7 @@ export function ChatList() {
      state.removeSession,
      state.moveSession,
    ]);
+  const chatStore = useChatStore();

  const onDragEnd: OnDragEndResponder = (result) => {
    const { destination, source } = result;
@@ -95,10 +96,7 @@ export function ChatList() {
                index={i}
                selected={i === selectedIndex}
                onClick={() => selectSession(i)}
-                onDelete={() =>
-                  (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) &&
-                  removeSession(i)
-                }
+                onDelete={chatStore.deleteSession}
              />
            ))}
            {provided.placeholder}
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -5,7 +5,7 @@ import TextareaAutosize from "react-textarea-autosize";
 import SendWhiteIcon from "../icons/send-white-fill.svg";
 import BrainIcon from "../icons/brain.svg";
 import ExportIcon from "../icons/export.svg";
-import MenuIcon from "../icons/menu.svg";
+import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
 import LoadingIcon from "../icons/three-dots.svg";
@@ -345,6 +345,7 @@ export function Chat(props: {

  const inputRef = useRef<HTMLTextAreaElement>(null);
  const [userInput, setUserInput] = useState("");
+  const [beforeInput, setBeforeInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const { submitKey, shouldSubmit } = useSubmitHandler();
  const { scrollRef, setAutoScroll } = useScrollToBottom();
@@ -409,6 +410,7 @@ export function Chat(props: {
    if (userInput.length <= 0) return;
    setIsLoading(true);
    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+    setBeforeInput(userInput);
    setUserInput("");
    setPromptHints([]);
    if (!isMobileScreen()) inputRef.current?.focus();
@@ -422,6 +424,12 @@ export function Chat(props: {

  // check if should send message
  const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // if ArrowUp and no userInput
+    if (e.key === "ArrowUp" && userInput.length <= 0) {
+      setUserInput(beforeInput);
+      e.preventDefault();
+      return;
+    }
    if (shouldSubmit(e)) {
      onUserSubmit();
      e.preventDefault();
@@ -509,13 +517,10 @@ export function Chat(props: {
  return (
    <div className={styles.chat} key={session.id}>
      <div className={styles["window-header"]}>
-        <div
-          className={styles["window-header-title"]}
-          onClick={props?.showSideBar}
-        >
+        <div className={styles["window-header-title"]}>
          <div
            className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
-            onClick={() => {
+            onClickCapture={() => {
              const newTopic = prompt(Locale.Chat.Rename, session.topic);
              if (newTopic && newTopic !== session.topic) {
                chatStore.updateCurrentSession(
@@ -533,7 +538,7 @@ export function Chat(props: {
        <div className={styles["window-actions"]}>
          <div className={styles["window-action-button"] + " " + styles.mobile}>
            <IconButton
-              icon={<MenuIcon />}
+              icon={<ReturnIcon />}
              bordered
              title={Locale.Chat.Actions.ChatList}
              onClick={props?.showSideBar}
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -208,6 +208,7 @@
  right: -20px;
  transition: all ease 0.3s;
  opacity: 0;
+  cursor: pointer;
 }

 .chat-item:hover>.chat-item-delete {
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -95,6 +95,7 @@ function _Home() {
      state.removeSession,
    ],
  );
+  const chatStore = useChatStore();
  const loading = !useHasHydrated();
  const [showSideBar, setShowSideBar] = useState(true);

@@ -157,11 +158,7 @@ function _Home() {
            <div className={styles["sidebar-action"] + " " + styles.mobile}>
              <IconButton
                icon={<CloseIcon />}
-                onClick={() => {
-                  if (confirm(Locale.Home.DeleteChat)) {
-                    removeSession(currentIndex);
-                  }
-                }}
+                onClick={chatStore.deleteSession}
              />
            </div>
            <div className={styles["sidebar-action"]}>
--- a/app/components/input-range.module.scss
+++ b/app/components/input-range.module.scss
@@ -0,0 +1,7 @@
+.input-range {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  padding: 5px 15px 5px 10px;
+  font-size: 12px;
+  display: flex;
+}
--- a/app/components/input-range.tsx
+++ b/app/components/input-range.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import styles from "./input-range.module.scss";
+
+interface InputRangeProps {
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  title?: string;
+  value: number | string;
+  className?: string;
+  min: string;
+  max: string;
+  step: string;
+}
+
+export function InputRange({
+  onChange,
+  title,
+  value,
+  className,
+  min,
+  max,
+  step,
+}: InputRangeProps) {
+  return (
+    <div className={styles["input-range"] + ` ${className ?? ""}`}>
+      {title || value}
+      <input
+        type="range"
+        title={title}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={onChange}
+      ></input>
+    </div>
+  );
+}
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -32,6 +32,7 @@ import { UPDATE_URL } from "../constant";
 import { SearchService, usePromptStore } from "../store/prompt";
 import { requestUsage } from "../requests";
 import { ErrorBoundary } from "./error";
+import { InputRange } from "./input-range";

 function SettingItem(props: {
  title: string;
@@ -127,6 +128,19 @@ export function Settings(props: { closeSettings: () => void }) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  useEffect(() => {
+    const keydownEvent = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        props.closeSettings();
+      }
+    };
+    document.addEventListener("keydown", keydownEvent);
+    return () => {
+      document.removeEventListener("keydown", keydownEvent);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  return (
    <ErrorBoundary>
      <div className={styles["window-header"]}>
@@ -274,8 +288,7 @@ export function Settings(props: { closeSettings: () => void }) {
            title={Locale.Settings.FontSize.Title}
            subTitle={Locale.Settings.FontSize.SubTitle}
          >
-            <input
-              type="range"
+            <InputRange
              title={`${config.fontSize ?? 14}px`}
              value={config.fontSize}
              min="12"
@@ -287,7 +300,7 @@ export function Settings(props: { closeSettings: () => void }) {
                    (config.fontSize = Number.parseInt(e.currentTarget.value)),
                )
              }
-            ></input>
+            ></InputRange>
          </SettingItem>

          <SettingItem title={Locale.Settings.TightBorder}>
@@ -407,8 +420,7 @@ export function Settings(props: { closeSettings: () => void }) {
            title={Locale.Settings.HistoryCount.Title}
            subTitle={Locale.Settings.HistoryCount.SubTitle}
          >
-            <input
-              type="range"
+            <InputRange
              title={config.historyMessageCount.toString()}
              value={config.historyMessageCount}
              min="0"
@@ -420,7 +432,7 @@ export function Settings(props: { closeSettings: () => void }) {
                    (config.historyMessageCount = e.target.valueAsNumber),
                )
              }
-            ></input>
+            ></InputRange>
          </SettingItem>

          <SettingItem
@@ -467,8 +479,7 @@ export function Settings(props: { closeSettings: () => void }) {
            title={Locale.Settings.Temperature.Title}
            subTitle={Locale.Settings.Temperature.SubTitle}
          >
-            <input
-              type="range"
+            <InputRange
              value={config.modelConfig.temperature?.toFixed(1)}
              min="0"
              max="2"
@@ -482,7 +493,7 @@ export function Settings(props: { closeSettings: () => void }) {
                      )),
                );
              }}
-            ></input>
+            ></InputRange>
          </SettingItem>
          <SettingItem
            title={Locale.Settings.MaxTokens.Title}
@@ -508,8 +519,7 @@ export function Settings(props: { closeSettings: () => void }) {
            title={Locale.Settings.PresencePenlty.Title}
            subTitle={Locale.Settings.PresencePenlty.SubTitle}
          >
-            <input
-              type="range"
+            <InputRange
              value={config.modelConfig.presence_penalty?.toFixed(1)}
              min="-2"
              max="2"
@@ -523,7 +533,7 @@ export function Settings(props: { closeSettings: () => void }) {
                      )),
                );
              }}
-            ></input>
+            ></InputRange>
          </SettingItem>
        </List>
      </div>
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -135,9 +135,25 @@
    box-shadow: var(--card-shadow);
    border: var(--border-in-light);
    color: var(--black);
-    padding: 10px 30px;
+    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+
+    .toast-action {
+      padding-left: 20px;
+      color: var(--primary);
+      opacity: 0.8;
+      border: 0;
+      background: none;
+      cursor: pointer;
+      font-family: inherit;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
  }
 }

@@ -149,6 +165,7 @@
  background-color: var(--white);
  color: var(--black);
  resize: none;
+  min-width: 50px;
 }

@media only screen and (max-width: 600px) {
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -110,17 +110,37 @@ export function showModal(props: ModalProps) {
  root.render(<Modal {...props} onClose={closeModal}></Modal>);
 }

-export type ToastProps = { content: string };
+export type ToastProps = {
+  content: string;
+  action?: {
+    text: string;
+    onClick: () => void;
+  };
+};

 export function Toast(props: ToastProps) {
  return (
    <div className={styles["toast-container"]}>
-      <div className={styles["toast-content"]}>{props.content}</div>
+      <div className={styles["toast-content"]}>
+        <span>{props.content}</span>
+        {props.action && (
+          <button
+            onClick={props.action.onClick}
+            className={styles["toast-action"]}
+          >
+            {props.action.text}
+          </button>
+        )}
+      </div>
    </div>
  );
 }

-export function showToast(content: string, delay = 3000) {
+export function showToast(
+  content: string,
+  action?: ToastProps["action"],
+  delay = 3000,
+) {
  const div = document.createElement("div");
  div.className = styles.show;
  document.body.appendChild(div);
@@ -139,7 +159,7 @@ export function showToast(content: string, delay = 3000) {
    close();
  }, delay);

-  root.render(<Toast content={content} />);
+  root.render(<Toast content={content} action={action} />);
 }

 export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {
--- a/app/icons/return.svg
+++ b/app/icons/return.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 2.6666666666666665)  rotate(0 1.1666333333333334 2.1666666666666665)"
+        d="M2.33,0L0,2L2.33,4.33 " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 4.666666666666666)  rotate(0 6.000006859869576 4.333333333333333)"
+        d="M0,0L7.66,0C9.96,0 11.91,1.87 12,4.17C12.09,6.59 10.09,8.67 7.66,8.67L2,8.67 " />
+    </g>
+  </g>
+</svg>
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -45,6 +45,8 @@ const cn = {
  Home: {
    NewChat: "新的聊天",
    DeleteChat: "确认删除选中的对话？",
+    DeleteToast: "已删除会话",
+    Revert: "撤销",
  },
  Settings: {
    Title: "设置",
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -50,6 +50,8 @@ const en: LocaleType = {
  Home: {
    NewChat: "New Chat",
    DeleteChat: "Confirm to delete the selected conversation?",
+    DeleteToast: "Chat Deleted",
+    Revert: "Revert",
  },
  Settings: {
    Title: "Settings",
--- a/app/locales/es.ts
+++ b/app/locales/es.ts
@@ -50,6 +50,8 @@ const es: LocaleType = {
  Home: {
    NewChat: "Nuevo chat",
    DeleteChat: "¿Confirmar eliminación de la conversación seleccionada?",
+    DeleteToast: "Chat Deleted",
+    Revert: "Revert",
  },
  Settings: {
    Title: "Configuración",
--- a/app/locales/it.ts
+++ b/app/locales/it.ts
@@ -50,6 +50,8 @@ const it: LocaleType = {
  Home: {
    NewChat: "Nuova Chat",
    DeleteChat: "Confermare la cancellazione della conversazione selezionata?",
+    DeleteToast: "Chat Deleted",
+    Revert: "Revert",
  },
  Settings: {
    Title: "Impostazioni",
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -48,6 +48,8 @@ const tw: LocaleType = {
  Home: {
    NewChat: "新的對話",
    DeleteChat: "確定要刪除選取的對話嗎？",
+    DeleteToast: "已刪除對話",
+    Revert: "撤銷",
  },
  Settings: {
    Title: "設定",
--- a/app/requests.ts
+++ b/app/requests.ts
@@ -9,7 +9,7 @@ const makeRequestParam = (
  options?: {
    filterBot?: boolean;
    stream?: boolean;
-  },
+  }
 ): ChatRequest => {
  let sendMessages = messages.map((v) => ({
    role: v.role,
@@ -46,11 +46,10 @@ function getHeaders() {

 export function requestOpenaiClient(path: string) {
  return (body: any, method = "POST") =>
-    fetch("/api/openai", {
+    fetch("/api/openai?_vercel_no_cache=1", {
      method,
      headers: {
        "Content-Type": "application/json",
-        "Cache-Control": "no-cache",
        path,
        ...getHeaders(),
      },
@@ -77,7 +76,7 @@ export async function requestUsage() {
      .getDate()
      .toString()
      .padStart(2, "0")}`;
-  const ONE_DAY = 24 * 60 * 60 * 1000;
+  const ONE_DAY = 2 * 24 * 60 * 60 * 1000;
  const now = new Date(Date.now() + ONE_DAY);
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
  const startDate = formatDate(startOfMonth);
@@ -85,7 +84,7 @@ export async function requestUsage() {

  const [used, subs] = await Promise.all([
    requestOpenaiClient(
-      `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}`,
+      `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}`
    )(null, "GET"),
    requestOpenaiClient("dashboard/billing/subscription")(null, "GET"),
  ]);
@@ -125,7 +124,7 @@ export async function requestChatStream(
    onMessage: (message: string, done: boolean) => void;
    onError: (error: Error, statusCode?: number) => void;
    onController?: (controller: AbortController) => void;
-  },
+  }
 ) {
  const req = makeRequestParam(messages, {
    stream: true,
@@ -214,7 +213,7 @@ export const ControllerPool = {
  addController(
    sessionIndex: number,
    messageId: number,
-    controller: AbortController,
+    controller: AbortController
  ) {
    const key = this.key(sessionIndex, messageId);
    this.controllers[key] = controller;
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -7,9 +7,10 @@ import {
  requestChatStream,
  requestWithPrompt,
 } from "../requests";
-import { trimTopic } from "../utils";
+import { isMobileScreen, trimTopic } from "../utils";

 import Locale from "../locales";
+import { showToast } from "../components/ui-lib";

 export type Message = ChatCompletionResponseMessage & {
  date: string;
@@ -204,6 +205,7 @@ interface ChatStore {
  moveSession: (from: number, to: number) => void;
  selectSession: (index: number) => void;
  newSession: () => void;
+  deleteSession: () => void;
  currentSession: () => ChatSession;
  onNewMessage: (message: Message) => void;
  onUserInput: (content: string) => Promise<void>;
@@ -324,6 +326,26 @@ export const useChatStore = create<ChatStore>()(
        }));
      },

+      deleteSession() {
+        const deletedSession = get().currentSession();
+        const index = get().currentSessionIndex;
+        const isLastSession = get().sessions.length === 1;
+        if (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) {
+          get().removeSession(index);
+        }
+        showToast(Locale.Home.DeleteToast, {
+          text: Locale.Home.Revert,
+          onClick() {
+            set((state) => ({
+              sessions: state.sessions
+                .slice(0, index)
+                .concat([deletedSession])
+                .concat(state.sessions.slice(index + Number(isLastSession))),
+            }));
+          },
+        });
+      },
+
      currentSession() {
        let index = get().currentSessionIndex;
        const sessions = get().sessions;
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -150,19 +150,11 @@ input[type="checkbox"]:checked::after {

 input[type="range"] {
  appearance: none;
-  border: var(--border-in-light);
-  border-radius: 10px;
-  padding: 5px 15px 5px 10px;
  background-color: var(--white);
  color: var(--black);
-
-  &::before {
-    content: attr(value);
-    font-size: 12px;
-  }
 }

-input[type="range"]::-webkit-slider-thumb {
+@mixin thumb() {
  appearance: none;
  height: 8px;
  width: 20px;
@@ -171,11 +163,36 @@ input[type="range"]::-webkit-slider-thumb {
  cursor: pointer;
  transition: all ease 0.3s;
  margin-left: 5px;
+  border: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  @include thumb();
+}
+
+input[type="range"]::-moz-range-thumb {
+  @include thumb();
+}
+
+input[type="range"]::-ms-thumb {
+  @include thumb();
+}
+
+@mixin thumbHover() {
+  transform: scaleY(1.2);
+  width: 24px;
 }

 input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scaleY(1.2);
-  width: 24px;
+  @include thumbHover();
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  @include thumbHover();
+}
+
+input[type="range"]::-ms-thumb:hover {
+  @include thumbHover();
 }

 input[type="number"],
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -7,21 +7,20 @@ export function trimTopic(topic: string) {
 }

 export async function copyToClipboard(text: string) {
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(text).catch(err => {
-      console.error('Failed to copy: ', err);
-    });
-  } else {
-    const textArea = document.createElement('textarea');
+  try {
+    await navigator.clipboard.writeText(text);
+    showToast(Locale.Copy.Success);
+  } catch (error) {
+    const textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
-      document.execCommand('copy');
-      console.log('Text copied to clipboard');
-    } catch (err) {
-      console.error('Failed to copy: ', err);
+      document.execCommand("copy");
+      showToast(Locale.Copy.Success);
+    } catch (error) {
+      showToast(Locale.Copy.Failed);
    }
    document.body.removeChild(textArea);
  }