From be4144fab32b340595efb9a005841716e9920103 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=AB=E3=82=99=E3=82=AA=E3=82=AB=E3=82=99=E3=82=AA?= Date: Tue, 4 Apr 2023 05:37:35 +0800 Subject: [PATCH 1/8] [opt] Optimize the display of exported chat history content. --- app/components/chat.tsx | 4 +++- app/locales/cn.ts | 2 ++ app/locales/en.ts | 2 ++ app/locales/es.ts | 2 ++ app/locales/it.ts | 2 ++ app/locales/tw.ts | 2 ++ 6 files changed, 13 insertions(+), 1 deletion(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 7aa8bfec6..6cd229cc3 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -60,7 +60,9 @@ function exportMessages(messages: Message[], topic: string) { `# ${topic}\n\n` + messages .map((m) => { - return m.role === "user" ? `## ${m.content}` : m.content.trim(); + return m.role === "user" + ? `## ${Locale.Export.MessageFromYou}:\n${m.content}` + : `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`; }) .join("\n\n"); const filename = `${topic}.md`; diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 49bcce235..11e9d044f 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -33,6 +33,8 @@ const cn = { Title: "导出聊天记录为 Markdown", Copy: "全部复制", Download: "下载文件", + MessageFromYou: "来自你的消息", + MessageFromChatGPT: "来自 ChatGPT 的消息", }, Memory: { Title: "历史记忆", diff --git a/app/locales/en.ts b/app/locales/en.ts index ae8e88c2d..af8201503 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -35,6 +35,8 @@ const en: LocaleType = { Title: "All Messages", Copy: "Copy All", Download: "Download", + MessageFromYou: "Message From You", + MessageFromChatGPT: "Message From ChatGPT", }, Memory: { Title: "Memory Prompt", diff --git a/app/locales/es.ts b/app/locales/es.ts index f3714ef3b..5c73b608b 100644 --- a/app/locales/es.ts +++ b/app/locales/es.ts @@ -35,6 +35,8 @@ const es: LocaleType = { Title: "Todos los mensajes", Copy: "Copiar todo", Download: "Descargar", + MessageFromYou: "Mensaje de ti", + MessageFromChatGPT: "Mensaje de ChatGPT", }, Memory: { Title: "Historial de memoria", diff --git a/app/locales/it.ts b/app/locales/it.ts index c4736c1e0..ce87796d1 100644 --- a/app/locales/it.ts +++ b/app/locales/it.ts @@ -35,6 +35,8 @@ const it: LocaleType = { Title: "Tutti i messaggi", Copy: "Copia tutto", Download: "Scarica", + MessageFromYou: "Messaggio da te", + MessageFromChatGPT: "Messaggio da ChatGPT", }, Memory: { Title: "Prompt di memoria", diff --git a/app/locales/tw.ts b/app/locales/tw.ts index fff2f15dc..b33ace2f6 100644 --- a/app/locales/tw.ts +++ b/app/locales/tw.ts @@ -34,6 +34,8 @@ const tw: LocaleType = { Title: "匯出聊天記錄為 Markdown", Copy: "複製全部", Download: "下載檔案", + MessageFromYou: "來自你的訊息", + MessageFromChatGPT: "來自 ChatGPT 的訊息", }, Memory: { Title: "上下文記憶 Prompt", From 8ba1dedcea3c53c13fe52963f3c73b3e8942a9c8 Mon Sep 17 00:00:00 2001 From: MaYuKe Date: Tue, 4 Apr 2023 23:32:19 +0800 Subject: [PATCH 2/8] Update settings.tsx Update parameter `step` of historyMessageCount to 1. --- app/components/settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 4645f3191..02c4415d7 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -417,7 +417,7 @@ export function Settings(props: { closeSettings: () => void }) { value={config.historyMessageCount} min="0" max="25" - step="2" + step="1" onChange={(e) => updateConfig( (config) => From 2625c1246bc08a56fd7075e8e80a177dd50277e7 Mon Sep 17 00:00:00 2001 From: Jun Wu Date: Tue, 4 Apr 2023 22:41:33 -0700 Subject: [PATCH 3/8] chore: removed redundant checkUsage `checkUsage()` was already called by another `useEffect`. There is no need to call it twice. --- app/components/settings.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 02c4415d7..1b51356eb 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -113,7 +113,6 @@ export function Settings(props: { closeSettings: () => void }) { useEffect(() => { checkUpdate(); - checkUsage(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); From 962f434e17be9ec802626db897b1682edef264c6 Mon Sep 17 00:00:00 2001 From: Jun Wu Date: Wed, 5 Apr 2023 00:15:48 -0700 Subject: [PATCH 4/8] perf: memorize markdown rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Markdown rendering can take time. Use `React.memo` for better performance. The improvement is especially visible if there are complex elements. For example, a `` with an output of `如何推导三次方程求根方程？` (which uses latex) now renders in about 5ms, down from ~140ms. Related: #302 --- app/components/chat.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 6cd229cc3..599921d2e 100644 --- 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"; @@ -33,7 +33,7 @@ import chatStyle from "./chat.module.scss"; import { Modal, showModal, showToast } from "./ui-lib"; -const Markdown = dynamic(async () => (await import("./markdown")).Markdown, { +const Markdown = dynamic(async () => memo((await import("./markdown")).Markdown), { loading: () => , }); From 91322f33eb502a46c2d1dc40e5c4e7e1ffae7f54 Mon Sep 17 00:00:00 2001 From: waltcow Date: Wed, 5 Apr 2023 15:29:25 +0800 Subject: [PATCH 5/8] emoji resouce CDN format override --- app/components/settings.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 1b51356eb..ecf0eb82c 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useMemo, HTMLProps } from "react"; -import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react"; +import EmojiPicker, { Theme as EmojiTheme, EmojiStyle, } from "emoji-picker-react"; import styles from "./settings.module.scss"; @@ -181,6 +181,9 @@ export function Settings(props: { closeSettings: () => void }) { { + return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`; + }} onEmojiClick={(e) => { updateConfig((config) => (config.avatar = e.unified)); setShowEmojiPicker(false); From 80904ac2bb9ba873183b436970cabe7c03b6c5ed Mon Sep 17 00:00:00 2001 From: waltcow Date: Wed, 5 Apr 2023 15:31:46 +0800 Subject: [PATCH 6/8] fix import --- app/components/settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/settings.tsx b/app/components/settings.tsx index ecf0eb82c..649da1b76 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useMemo, HTMLProps } from "react"; -import EmojiPicker, { Theme as EmojiTheme, EmojiStyle, } from "emoji-picker-react"; +import EmojiPicker, { Theme as EmojiTheme, EmojiStyle } from "emoji-picker-react"; import styles from "./settings.module.scss"; From f4fc682fa3e05bbb0dd56c6eca834a09b8b59f19 Mon Sep 17 00:00:00 2001 From: waltcow Date: Wed, 5 Apr 2023 15:48:44 +0800 Subject: [PATCH 7/8] add `getEmojiUrl` as util function --- app/components/chat.tsx | 3 ++- app/components/settings.tsx | 8 +++----- app/utils.ts | 5 +++++ 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 6cd229cc3..7ac9ca085 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -17,6 +17,7 @@ import { Message, SubmitKey, useChatStore, BOT_HELLO, ROLES } from "../store"; import { copyToClipboard, downloadAs, + getEmojiUrl, isMobileScreen, selectOrCopy, } from "../utils"; @@ -50,7 +51,7 @@ export function Avatar(props: { role: Message["role"] }) { return (
- +
); } diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 649da1b76..b563d7bab 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useMemo, HTMLProps } from "react"; -import EmojiPicker, { Theme as EmojiTheme, EmojiStyle } from "emoji-picker-react"; +import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react"; import styles from "./settings.module.scss"; @@ -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"; @@ -181,9 +181,7 @@ export function Settings(props: { closeSettings: () => void }) { { - return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`; - }} + getEmojiUrl={getEmojiUrl} onEmojiClick={(e) => { updateConfig((config) => (config.avatar = e.unified)); setShowEmojiPicker(false); diff --git a/app/utils.ts b/app/utils.ts index 5fe277c63..93f7561af 100644 --- a/app/utils.ts +++ b/app/utils.ts @@ -1,3 +1,4 @@ +import { EmojiStyle } from "emoji-picker-react"; import { showToast } from "./components/ui-lib"; import Locale from "./locales"; @@ -81,3 +82,7 @@ export function getCurrentVersion() { return currentId; } + +export function getEmojiUrl(unified: string, style: EmojiStyle) { + return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`; +} From 909e2ab60f276270a958d3d38bd79b9f65ff8bc3 Mon Sep 17 00:00:00 2001 From: Yorun <547747006@qq.com> Date: Wed, 5 Apr 2023 11:32:45 +0000 Subject: [PATCH 8/8] fix: header title overflow --- app/components/window.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/window.scss b/app/components/window.scss index d89c9eb10..a92aed4eb 100644 --- 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;