From 7d5e742ea61be97da4d4cff9ca69528ee171d216 Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Mon, 27 Mar 2023 16:30:12 +0000 Subject: [PATCH 1/4] feat: #2 add prompt list --- .gitignore | 4 +- README.md | 2 + app/store/prompt.ts | 96 +++++++++++++++++++++++++++++++++++++++ package.json | 10 ++-- scripts/fetch-prompts.mjs | 49 ++++++++++++++++++++ yarn.lock | 49 ++++++++++++++++++++ 6 files changed, 206 insertions(+), 4 deletions(-) create mode 100644 app/store/prompt.ts create mode 100644 scripts/fetch-prompts.mjs diff --git a/.gitignore b/.gitignore index 354be805..0a3e52af 100644 --- a/.gitignore +++ b/.gitignore @@ -34,4 +34,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts -dev \ No newline at end of file +dev + +public/prompts.json \ No newline at end of file diff --git a/README.md b/README.md index c0f6d9dd..dc1e7ca9 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ One-Click to deploy your own ChatGPT web UI. - 在 1 分钟内使用 Vercel **免费一键部署** - 精心设计的 UI，响应式设计，支持深色模式 - 极快的首屏加载速度（~85kb） +- 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts) - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话 - 一键导出聊天记录，完整的 Markdown 支持 - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问 @@ -31,6 +32,7 @@ One-Click to deploy your own ChatGPT web UI. - **Deploy for free with one-click** on Vercel in under 1 minute - Responsive design, and dark mode - Fast first screen loading speed (~85kb) +- Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts) - Automatically compresses chat history to support long conversations while also saving your tokens - One-click export all chat history with full Markdown support diff --git a/app/store/prompt.ts b/app/store/prompt.ts new file mode 100644 index 00000000..ffd6a74e --- /dev/null +++ b/app/store/prompt.ts @@ -0,0 +1,96 @@ +import { create } from "zustand"; +import { persist } from "zustand/middleware"; +import JsSearch from "js-search"; + +export interface Prompt { + id?: number; + shortcut: string; + title: string; + content: string; +} + +export interface PromptStore { + latestId: number; + prompts: Map; + + add: (prompt: Prompt) => number; + remove: (id: number) => void; + search: (text: string) => Prompt[]; +} + +export const PROMPT_KEY = "prompt-store"; + +export const SearchService = { + ready: false, + progress: 0, // 0 - 1, 1 means ready + engine: new JsSearch.Search("prompts"), + deleted: new Set(), + + async init(prompts: PromptStore["prompts"]) { + this.engine.addIndex("id"); + this.engine.addIndex("shortcut"); + this.engine.addIndex("title"); + + const n = prompts.size; + let count = 0; + for await (const prompt of prompts.values()) { + this.engine.addDocument(prompt); + count += 1; + this.progress = count / n; + } + this.ready = true; + }, + + remove(id: number) { + this.deleted.add(id); + }, + + add(prompt: Prompt) { + this.engine.addDocument(prompt); + }, + + search(text: string) { + const results = this.engine.search(text) as Prompt[]; + return results.filter((v) => !v.id || !this.deleted.has(v.id)); + }, +}; + +export const usePromptStore = create()( + persist( + (set, get) => ({ + latestId: 0, + prompts: new Map(), + + add(prompt) { + const prompts = get().prompts; + prompt.id = get().latestId + 1; + prompts.set(prompt.id, prompt); + + set(() => ({ + latestId: prompt.id!, + prompts: prompts, + })); + + return prompt.id!; + }, + + remove(id) { + const prompts = get().prompts; + prompts.delete(id); + SearchService.remove(id); + + set(() => ({ + prompts, + })); + }, + + search(text) { + return SearchService.search(text) as Prompt[]; + }, + }), + { + name: PROMPT_KEY, + version: 1, + } + ) +); diff --git a/package.json b/package.json index b7d1d699..8cf52990 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,15 @@ "private": false, "license": "Anti 996", "scripts": { - "dev": "next dev", - "build": "next build", + "dev": "yarn fetch && next dev", + "build": "yarn fetch && next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "fetch": "node ./scripts/fetch-prompts.mjs" }, "dependencies": { "@svgr/webpack": "^6.5.1", + "@types/js-search": "^1.4.0", "@types/node": "^18.14.6", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", @@ -22,7 +24,9 @@ "eslint": "8.35.0", "eslint-config-next": "13.2.3", "eventsource-parser": "^0.1.0", + "js-search": "^2.0.0", "next": "^13.2.3", + "node-fetch": "^3.3.1", "openai": "^3.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/scripts/fetch-prompts.mjs b/scripts/fetch-prompts.mjs new file mode 100644 index 00000000..daebfe7a --- /dev/null +++ b/scripts/fetch-prompts.mjs @@ -0,0 +1,49 @@ +import fetch from "node-fetch"; +import fs from "fs/promises"; + +const CN_URL = + "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json"; +const EN_URL = + "https://raw.githubusercontent.com/f/awesome-chatgpt-prompts/main/prompts.csv"; +const FILE = "./public/prompts.json"; + +async function fetchCN() { + console.log("[Fetch] fetching cn prompts..."); + try { + const raw = await (await fetch(CN_URL)).json(); + return raw.map((v) => [v.act, v.prompt]); + } catch (error) { + console.error("[Fetch] failed to fetch cn prompts", error); + return []; + } +} + +async function fetchEN() { + console.log("[Fetch] fetching en prompts..."); + try { + const raw = await (await fetch(EN_URL)).text(); + return raw + .split("\n") + .slice(1) + .map((v) => v.split('","').map((v) => v.replace('"', ""))); + } catch (error) { + console.error("[Fetch] failed to fetch cn prompts", error); + return []; + } +} + +async function main() { + Promise.all([fetchCN(), fetchEN()]) + .then(([cn, en]) => { + fs.writeFile(FILE, JSON.stringify({ cn, en })); + }) + .catch((e) => { + console.error("[Fetch] failed to fetch prompts"); + fs.writeFile(FILE, JSON.stringify({ cn: [], en: [] })); + }) + .finally(() => { + console.log("[Fetch] saved to " + FILE); + }); +} + +main(); diff --git a/yarn.lock b/yarn.lock index 7e69c5da..7a8baf25 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,6 +1320,11 @@ dependencies: "@types/unist" "*" +"@types/js-search@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@types/js-search/-/js-search-1.4.0.tgz#f2d4afa176a4fc7b17fb46a1593847887fa1fb7b" + integrity sha512-OMDWvQP2AmxpQI9vFh7U/TzExNGB9Sj9WQCoxUR8VXZEv6jM4cyNzLODkh1gkBHJ9Er7kdasChzEpba4FxLGaA== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.npmmirror.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -1879,6 +1884,11 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.npmmirror.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== +data-uri-to-buffer@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e" + integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A== + debug@^3.2.7: version "3.2.7" resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" @@ -2413,6 +2423,14 @@ fastq@^1.6.0: dependencies: reusify "^1.0.4" +fetch-blob@^3.1.2, fetch-blob@^3.1.4: + version "3.2.0" + resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9" + integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ== + dependencies: + node-domexception "^1.0.0" + web-streams-polyfill "^3.0.3" + file-entry-cache@^6.0.1: version "6.0.1" resolved "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027" @@ -2469,6 +2487,13 @@ form-data@^4.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +formdata-polyfill@^4.0.10: + version "4.0.10" + resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423" + integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g== + dependencies: + fetch-blob "^3.1.2" + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -3017,6 +3042,11 @@ js-sdsl@^4.1.4: resolved "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711" integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ== +js-search@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/js-search/-/js-search-2.0.0.tgz#84dc9d44e34ca0870d067e04b86d8038b77edc26" + integrity sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -3693,6 +3723,20 @@ next@^13.2.3: "@next/swc-win32-ia32-msvc" "13.2.4" "@next/swc-win32-x64-msvc" "13.2.4" +node-domexception@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5" + integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ== + +node-fetch@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.1.tgz#b3eea7b54b3a48020e46f4f88b9c5a7430d20b2e" + integrity sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow== + dependencies: + data-uri-to-buffer "^4.0.0" + fetch-blob "^3.1.4" + formdata-polyfill "^4.0.10" + node-releases@^2.0.8: version "2.0.10" resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" @@ -4662,6 +4706,11 @@ web-namespaces@^2.0.0: resolved "https://registry.npmmirror.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692" integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ== +web-streams-polyfill@^3.0.3: + version "3.2.1" + resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6" + integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q== + which-boxed-primitive@^1.0.2: version "1.0.2" resolved "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6" From 6782e65fdf6ea7f79ead3c6907eacf110d097402 Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Tue, 28 Mar 2023 17:30:11 +0000 Subject: [PATCH 2/4] feat: #2 add prompt hints --- app/components/home.module.scss | 58 ++++++++++++++++++++++- app/components/home.tsx | 82 +++++++++++++++++++++++++++++---- app/components/settings.tsx | 41 ++++++++++++++++- app/components/ui-lib.tsx | 2 +- app/icons/edit.svg | 1 + app/locales/cn.ts | 10 ++++ app/store/app.ts | 4 ++ app/store/prompt.ts | 63 +++++++++++++++++-------- package.json | 4 +- yarn.lock | 20 ++++---- 10 files changed, 238 insertions(+), 47 deletions(-) create mode 100644 app/icons/edit.svg diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 730c05ef..462b19ce 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -333,11 +333,65 @@ .chat-input-panel { position: absolute; - bottom: 20px; + bottom: 0px; display: flex; width: 100%; padding: 20px; box-sizing: border-box; + flex-direction: column; +} + +@mixin single-line { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.prompt-hints { + min-height: 20px; + width: 100%; + max-height: 50vh; + overflow: auto; + display: flex; + flex-direction: column-reverse; + + background-color: var(--white); + border: var(--border-in-light); + border-radius: 10px; + margin-bottom: 10px; + box-shadow: var(--shadow); + + .prompt-hint { + color: var(--black); + padding: 6px 10px; + animation: slide-in ease 0.3s; + cursor: pointer; + transition: all ease 0.3s; + border: transparent 1px solid; + margin: 4px; + border-radius: 8px; + + &:not(:last-child) { + margin-top: 0; + } + + .hint-title { + font-size: 12px; + font-weight: bolder; + + @include single-line(); + } + .hint-content { + font-size: 12px; + + @include single-line(); + } + + &-selected, + &:hover { + border-color: var(--primary); + } + } } .chat-input-panel-inner { @@ -375,7 +429,7 @@ position: absolute; right: 30px; - bottom: 10px; + bottom: 30px; } .export-content { diff --git a/app/components/home.tsx b/app/components/home.tsx index 850c5177..1a84d727 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -1,6 +1,7 @@ "use client"; import { useState, useRef, useEffect, useLayoutEffect } from "react"; +import { useDebouncedCallback } from "use-debounce"; import { IconButton } from "./button"; import styles from "./home.module.scss"; @@ -28,6 +29,7 @@ import Locale from "../locales"; import dynamic from "next/dynamic"; import { REPO_URL } from "../constant"; import { ControllerPool } from "../requests"; +import { Prompt, usePromptStore } from "../store/prompt"; export function Loading(props: { noLogo?: boolean }) { return ( @@ -146,24 +148,77 @@ function useSubmitHandler() { }; } +export function PromptHints(props: { + prompts: Prompt[]; + onPromptSelect: (prompt: Prompt) => void; +}) { + if (props.prompts.length === 0) return null; + + return ( +
+ {props.prompts.map((prompt, i) => ( +
props.onPromptSelect(prompt)} + > +
{prompt.title}
+
{prompt.content}
+
+ ))} +
+ ); +} + export function Chat(props: { showSideBar?: () => void }) { type RenderMessage = Message & { preview?: boolean }; + const chatStore = useChatStore(); const [session, sessionIndex] = useChatStore((state) => [ state.currentSession(), state.currentSessionIndex, ]); + + const inputRef = useRef(null); const [userInput, setUserInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const { submitKey, shouldSubmit } = useSubmitHandler(); - const onUserInput = useChatStore((state) => state.onUserInput); + // prompt hints + const promptStore = usePromptStore(); + const [promptHints, setPromptHints] = useState([]); + const onSearch = useDebouncedCallback( + (text: string) => { + if (chatStore.config.disablePromptHint) return; + setPromptHints(promptStore.search(text)); + }, + 100, + { leading: true, trailing: true } + ); + + const onPromptSelect = (prompt: Prompt) => { + setUserInput(prompt.content); + setPromptHints([]); + inputRef.current?.focus(); + }; + + // only search prompts when user input is short + const SEARCH_TEXT_LIMIT = 10; + const onInput = (text: string) => { + setUserInput(text); + const n = text.trim().length; + if (n === 0 || n > SEARCH_TEXT_LIMIT) { + setPromptHints([]); + } else { + onSearch(text); + } + }; // submit user input const onUserSubmit = () => { if (userInput.length <= 0) return; setIsLoading(true); - onUserInput(userInput).then(() => setIsLoading(false)); + chatStore.onUserInput(userInput).then(() => setIsLoading(false)); setUserInput(""); inputRef.current?.focus(); }; @@ -198,7 +253,9 @@ export function Chat(props: { showSideBar?: () => void }) { for (let i = botIndex; i >= 0; i -= 1) { if (messages[i].role === "user") { setIsLoading(true); - onUserInput(messages[i].content).then(() => setIsLoading(false)); + chatStore + .onUserInput(messages[i].content) + .then(() => setIsLoading(false)); return; } } @@ -206,7 +263,6 @@ export function Chat(props: { showSideBar?: () => void }) { // for auto-scroll const latestMessageRef = useRef(null); - const inputRef = useRef(null); // wont scroll while hovering messages const [autoScroll, setAutoScroll] = useState(false); @@ -373,17 +429,21 @@ export function Chat(props: { showSideBar?: () => void }) {
+