├── .env.example
├── .gitignore
├── LICENSE
├── README.md
├── assets
    └── qr.jpg
├── components
    ├── Chat.js
    ├── Chat.module.scss
    ├── Config.js
    ├── DropDown.tsx
    ├── Footer.tsx
    ├── GitHub.tsx
    ├── Header.tsx
    ├── LoadingDots.tsx
    ├── Messages.js
    ├── Messages.module.css
    ├── PromptElement.js
    ├── PromptElement.module.css
    ├── Shapes.js
    ├── logo.svg
    ├── notice.js
    └── share.js
├── next.config.js
├── package.json
├── pages
    ├── _app.tsx
    ├── _document.tsx
    ├── account.js
    ├── account.module.css
    ├── api
    │   └── chat.ts
    └── index.tsx
├── pnpm-lock.yaml
├── postcss.config.js
├── public
    ├── 1-black.png
    ├── 2-black.png
    ├── analytics.png
    ├── app.png
    ├── assets
    │   ├── group-qr-8-13.jpeg
    │   └── qr.jpg
    ├── favicon.ico
    ├── manifest.json
    ├── notice.json
    ├── og-image.png
    ├── qr-prom.png
    ├── qr.jpg
    ├── robots.txt
    ├── screenshot.png
    ├── share.jpg
    ├── vercel.svg
    ├── vercelLogo.png
    └── writingIcon.png
├── styles
    ├── globals.css
    └── loading-dots.module.css
├── tailwind.config.js
├── tsconfig.json
└── utils
    ├── ChatServiceBridge.js
    ├── ObjCacheWrap.js
    ├── OpenAIStream.ts
    ├── Others.js
    ├── Settings.js
    └── client
        └── ChatGPTClient.js


/.env.example:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | .env
38 | 
39 | # idea
40 | .idea
41 | 
42 | .next


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 FrontendEngineeringTeam
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # FullStack-ChatGPT-WebApp
  2 | 
  3 | [![GitHub license](https://flashpixel-1253674045.cos.ap-shanghai.myqcloud.com/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c7565.svg)](https://github.com/frontend-engineering/chatgpt-webapp-fullstack)
  4 | ![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/WeixinCloud/wxcloudrun-express/express)
  5 | ![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/WeixinCloud/wxcloudrun-express/sequelize)
  6 | 
  7 | 
  8 | 这是一个 ChatGPT 聊天应用，包含网页端App和一个Node服务，可快速部署一套自用的完整智能聊天服务（[点击体验](https://www.webinfra.cloud)）
  9 | 
 10 | ## 功能特点
 11 | 
 12 | * 全栈应用：包括 **网页端App** 和 **服务端Node服务**，适合全链路功能的二次开发
 13 | * 快速部署：项目迁移到了Nextjs架构，前后端一键部署，无须一行代码，小白也可以发布自己的ChatGPT服务了
 14 | * 无须运维：利用vercel的免费额度，摆脱繁琐的运维工作
 15 | * 无须翻墙：针对国内无法直接访问OpenAI的限制，本服务部署完成后，可直接访问，无须科学上网
 16 | * 多端适配：适配手机端和PC端，更多客户端功能迭代中
 17 | * 上下文记忆：问了保障问答质量，缓存了提问记录
 18 | * stream响应：支持stream的响应方式，更好的问答体验
 19 | * 流量控制：支持单用户的调用流量限制，防止恶意盗刷Token
 20 | * 用户充值：支持开启用户收费功能，用户可充值购买调用额度
 21 | 
 22 | >> 功能开发快速迭代中，使用或部署时如果遇到任何问题，请加页面最下方微信交流群反馈
 23 | 
 24 | https://github.com/frontend-engineering/chatgpt-webapp-fullstack/assets/9939767/eaef68ce-e73b-4dd5-9277-6b0f4f201455
 25 | 
 26 | 
 27 | 
 28 | ## 一键部署
 29 | 
 30 | 自动部署服务到Vercel
 31 | 
 32 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ffrontend-engineering%2Fchatgpt-webapp-fullstack&project-name=private-chatgpt-service&repository-name=chatgpt-webapp-fullstack&demo-title=Demo%20Page&demo-description=%E7%A4%BA%E4%BE%8B%E9%A1%B9%E7%9B%AE&demo-url=https%3A%2F%2Fwebinfra.cloud)
 33 | 
 34 | ### 部署依赖
 35 | 
 36 | 需要额外配置vercel Edge Config 和 Vercel KV 两个store
 37 | * Edge Config 用来管理项目配置
 38 | * KV 用于存储用户聊天上下文的数据缓存
 39 | 
 40 | 其中，Edge Config的初始配置可以参考
 41 | ```
 42 | {
 43 |   "chatGptClient": {
 44 |     "openaiApiKey": "sk-你的openai api key",
 45 |     "reverseProxyUrl": "",
 46 |     "modelOptions": {
 47 |       "model": "gpt-3.5-turbo",
 48 |       "max_tokens": 1000
 49 |     },
 50 |     "proxy": "",
 51 |     "debug": false
 52 |   },
 53 |   "apiOptions": {
 54 |     "port": 3000,
 55 |     "host": "0.0.0.0",
 56 |     "debug": false,
 57 |     "clientToUse": "chatgpt",
 58 |     "perMessageClientOptionsWhitelist": {
 59 |       "validClientsToUse": ["bing", "chatgpt", "chatgpt-browser"],
 60 |       "chatgpt": [
 61 |         "promptPrefix",
 62 |         "userLabel",
 63 |         "chatGptLabel",
 64 |         "modelOptions.temperature"
 65 |       ]
 66 |     }
 67 |   },
 68 |   "cacheOptions": {}
 69 | }
 70 | ```
 71 | 
 72 | ## 项目结构
 73 | 
 74 | 项目迁移到了NextJS，开发参考 [Next.js文档](https://nextjs.org/docs)
 75 | 
 76 | ## 项目体验
 77 | 
 78 | 打开 [DEMO](https://www.webinfra.cloud)
 79 | 或扫码
 80 | <p align="center">
 81 |   <img alt="demo qr" width="128px" src="./public/assets/qr.jpg">
 82 | </p>
 83 | 
 84 | 
 85 | 
 86 | ## 更多功能
 87 | 更多功能正在开发中，如有需要可以私聊，或者贡献PR
 88 | 
 89 | * 前端WebApp功能补全
 90 | * BingAI等多模型支持
 91 | * 其他
 92 | 
 93 | ## 私有部署
 94 | 如有部署方面的问题，可关注公众号 <strong>webinfra</strong> 需求帮助
 95 |  ![](https://flashpixel-1253674045.cos.ap-shanghai.myqcloud.com/%E6%89%AB%E7%A0%81_%E6%90%9C%E7%B4%A2%E8%81%94%E5%90%88%E4%BC%A0%E6%92%AD%E6%A0%B7%E5%BC%8F-%E7%99%BD%E8%89%B2%E7%89%88.bmp)
 96 | 
 97 |  或加交流群
 98 | <p align="center">
 99 |   <img width="248px" src="/public/assets/group-qr-8-13.jpeg" />
100 | </p>
101 | 
102 | ## License
103 | 
104 | [MIT](./LICENSE)
105 | 


--------------------------------------------------------------------------------
/assets/qr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/assets/qr.jpg


--------------------------------------------------------------------------------
/components/Chat.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
  2 | import { useRouter } from 'next/router';
  3 | import { Toast, Button, Modal, TextArea, SafeArea, NoticeBar, Tag } from 'antd-mobile'
  4 | import { PlayOutline, UserSetOutline } from 'antd-mobile-icons'
  5 | import Cashier from '@cashier/web';
  6 | import classnames from 'classnames';
  7 | import { callBridge } from '../utils/ChatServiceBridge';
  8 | import Messages from './Messages';
  9 | import { useLocalStorage } from '../utils/Others';
 10 | import PromotSelect from './PromptElement.js';
 11 | import styles from './Chat.module.scss';
 12 | import { appId, appToken, enableAuth } from './Config.js';
 13 | 
 14 | function ChatComponent(props) {
 15 |     const router = useRouter();
 16 |     const [loginState, setLoginState] = useState(null)
 17 |     const [question, setQuestion] = useState("");
 18 |     const [outMsgs, setOutMsgs] = useLocalStorage('chat-out-msgs', []);
 19 |     const [retMsgs, setRetMsgs] = useLocalStorage('chat-ret-msgs', []);
 20 |     const [msgId, setMsgId] = useState('');
 21 |     const [convId, setConvId] = useState('');
 22 |     const [typing, setTyping] = useState(false);
 23 |     const [answerTS, setAnswerTS] = useState(new Date().valueOf());
 24 |     const [answer, setAnswer] = useState();
 25 |     const [hasNotice, setHasNotice] = useState('');
 26 |     const [abortSignal, setAbortSignal] = useState(null);
 27 |     const [selectingPrompt, setSelectingPrompt] = useState(false);
 28 |     const [selectedPrompt, setSelectedPrompt] = useLocalStorage('chat-selected-prompt', null);
 29 | 
 30 |     const answerTSRef = useRef();
 31 |     answerTSRef.current = answerTS;
 32 | 
 33 |     const answerRef = useRef();
 34 |     answerRef.current = answer;
 35 | 
 36 |     const abortSignalRef = useRef();
 37 |     abortSignalRef.current = abortSignal;
 38 | 
 39 |     const messagesEndRef = useRef(null)
 40 | 
 41 |     const sdkInsta = useMemo(() => {
 42 |         if (!enableAuth) {
 43 |             console.log('skip auth');
 44 |             return null;
 45 |         }
 46 |         return new Cashier({
 47 |             // 应用 ID
 48 |             appId,
 49 |             appToken,
 50 |             // domain: 'http://localhost:3333',
 51 |             pageDomain: 'https://pay.freecharger.cn',
 52 |             mobile: true,
 53 |             inPage: true,
 54 |             root: '#sdk-root'
 55 |         });
 56 |     }, []);
 57 | 
 58 |     const getLoginState = useCallback(async () => {
 59 |         if (!sdkInsta) return;
 60 |         try {
 61 |             console.log('get login state...');
 62 |             let state = await sdkInsta.getUserInfo();
 63 |             console.log('get loginState resp: ', state)
 64 |             if (!state) {
 65 |                 state = await sdkInsta.login()
 66 |             }
 67 |             setLoginState(state);
 68 |         } catch (error) {
 69 |             console.error('login state: ', error);
 70 |             Toast.show({
 71 |                 content: `初始化失败 - ${error?.message}`
 72 |             }) 
 73 |         }
 74 |     }, [sdkInsta]);
 75 | 
 76 |     const getLoginTokens = useCallback(async () => {
 77 |         if (!sdkInsta) return;
 78 |         let tokens = await sdkInsta.getTokens();
 79 |         console.log('get tokens: ', tokens)
 80 |         return tokens;
 81 |     }, [sdkInsta]); 
 82 | 
 83 | 
 84 |     const scrollToBottom = () => {
 85 |         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
 86 |         console.log('scroll to bottom');
 87 |     }
 88 | 
 89 |     const genRandomMsgId = () => {
 90 |         return `msg-${new Date().valueOf()}-${Math.floor(Math.random() * 10)}`;
 91 |     }
 92 | 
 93 |     const onChoosePrompt = (val) => {
 94 |         setSelectedPrompt(val)
 95 |         Toast.show({
 96 |             content: `预设模式更新为 - ${val.label}`
 97 |         })
 98 |     }
 99 |     
100 |     const inputQuestion = val => {
101 |         setQuestion(val);
102 |     }
103 | 
104 |     const onmessage = (msgObj) => {
105 |         console.log('onmsg - ', msgObj)
106 |         setAnswer(lastAns => (lastAns || '') + msgObj);
107 |         scrollToBottom()
108 |     }
109 |     function nextTick() {
110 |         return new Promise(resolve => setTimeout(resolve, 0));
111 |     }
112 |     const onopen = async () => {
113 |         console.log('open', new Date(), new Date(answerTSRef.current));
114 |         setAnswerTS(new Date().valueOf());
115 |         await nextTick();
116 |         console.log('opened', new Date(), new Date(answerTSRef.current));
117 |     }
118 | 
119 |     const onclose = () => {
120 |         console.log('closed ', answerRef.current, new Date())
121 |         if (answerRef.current) {
122 |             setRetMsgs([...retMsgs, { id: genRandomMsgId(), msg: answerRef.current, timestamp: answerTSRef.current }])
123 |             setAnswer('')
124 |             setTyping(false);
125 |             setAnswerTS(new Date().valueOf());
126 |         }
127 |     }
128 |     const onerror = (message) => {
129 |         console.log("error: ", answerRef.current);
130 |         if (answerRef.current) {
131 |             if (answerRef.current) {
132 |                 setRetMsgs([...retMsgs, { id: genRandomMsgId(), msg: answerRef.current + '...', timestamp: answerTSRef.current }])
133 |             }
134 |             setAnswer('')
135 |             setTyping(false);
136 |         } else {
137 |             console.log('chatGPT error msg: ', message);
138 |             throw new Error('ChatGPT 用量饱和，请稍后重试')
139 |         }
140 |     }
141 | 
142 |     const directChat = async function (e) {
143 |         e.preventDefault();
144 |         if (!question) {
145 |             Toast.show({
146 |                 content: '请输入有效问题',
147 |             })
148 |             return;
149 |         }
150 | 
151 |         if (!loginState && enableAuth) {
152 |             Toast.show({
153 |                 content: '请先登录'
154 |             })
155 |             return;
156 |         }
157 | 
158 |         setQuestion('');
159 |         setOutMsgs([...outMsgs, { id: genRandomMsgId(), msg: question, timestamp: new Date().valueOf() }])
160 | 
161 |         setAbortSignal(null);
162 |         setTyping(true);
163 |         // 向云服务发起调用
164 |         try {
165 |             const tokens = await getLoginTokens();
166 | 
167 |             const callRes = await callBridge({
168 |                 data: {
169 |                     uid: loginState?.id,
170 |                     at: tokens?.accessToken,
171 |                     message: question,
172 |                     parentMessageId: msgId,
173 |                     conversationId: convId,
174 |                     prompt: selectedPrompt?.prompt
175 |                 },
176 |                 onmessage,
177 |                 onopen,
178 |                 onclose,
179 |                 onerror,
180 |                 getSignal: (sig) => {
181 |                     setAbortSignal(sig);
182 |                 },
183 |                 debug: props.debug
184 |             })
185 |  
186 |             console.log('client stream result: ', abortSignalRef.current, callRes, answerTSRef.current, new Date(answerTSRef.current));
187 |             const { response, messageId, conversationId } = callRes || {}
188 | 
189 |             const curMsgId = messageId || genRandomMsgId()
190 |             setMsgId(curMsgId);
191 | 
192 |             if (conversationId) {
193 |                 setConvId(conversationId);
194 |             }
195 | 
196 |             setTyping(false);
197 |             setRetMsgs([...retMsgs, { id: curMsgId, msg: response, timestamp: answerTSRef.current }])
198 |             setAnswer('')
199 |             setAnswerTS(Date.now())
200 | 
201 |             return callRes;
202 |         } catch (error) {
203 |             console.error('call service error: ', error);
204 |             setRetMsgs([...retMsgs, { id: genRandomMsgId(), msg: error?.message || '在线人数太多啦，请稍后再试', timestamp: new Date().valueOf() }])
205 |             setTyping(false);
206 |         }
207 |     }
208 | 
209 |     const gotoAccount = (e) => {
210 |         e.preventDefault();
211 |         console.log('goto account page ....')
212 |         if (enableAuth) {
213 |             router.push('/account')
214 |         }
215 |     }
216 | 
217 |     const deleteItem = (id, type) => {
218 |         if (!id) {
219 |             Toast.show({
220 |                 icon: 'fail',
221 |                 content: '该对话已过期',
222 |             })
223 |             return;
224 |         }
225 |         Modal.confirm({
226 |             content: '确认删除该对话',
227 |             confirmText: '删除',
228 |             cancelText: '取消',
229 |             onCancel: () => {
230 |                 console.log('close modal')
231 |                 Modal.clear()
232 |             },
233 |             onConfirm: () => {
234 |                 if (type === 'incoming') {
235 |                     setRetMsgs([...(retMsgs.filter(item => item.id !== id))])
236 |                 } else {
237 |                     setOutMsgs([...(outMsgs.filter(item => item.id !== id))])
238 |                 }
239 | 
240 |                 Modal.clear();
241 |             }
242 |         })
243 |     }
244 |     const editItem = (txt) => {
245 |         setQuestion(txt);
246 |     }
247 | 
248 | 
249 |     useEffect(() => {
250 |         if (sdkInsta) {
251 |             sdkInsta.init()
252 |                 .then((resp) => {
253 |                     if (resp) {
254 |                         // 加载到了操作结果数据，反馈登录/购买结果给用户
255 |                         console.log('found resp: ', resp);
256 |                     }
257 |                     return getLoginState()                    
258 |                 })
259 |         }
260 |     }, [sdkInsta, getLoginState]);
261 | 
262 |     useEffect(() => {
263 |         setTimeout(() => {
264 |             scrollToBottom();
265 |         }, 300)
266 |     }, []);
267 | 
268 |     const onCancelChat = (e) => {
269 |         e.preventDefault();
270 |         console.log('=============user===cancel============');
271 |         abortSignalRef.current?.abort();
272 |         // TODO: Send cancel feedback to server
273 |         setTyping(false);
274 |     }
275 | 
276 |     return (<div className={styles["container"]}>
277 |         <div className={styles["chatbox"]}>
278 |             <div id='sdk-root'></div>
279 |             <div className={styles["top-bar"]}>
280 |             <div className={styles["avatar"]}>
281 |                 <p>{loginState?.name?.toUpperCase().slice(0, 2) || 'W'}</p>
282 |             </div>
283 |             <div className={styles["name"]}>WebInfra</div>
284 |             <div className={styles["menu"]}>
285 |                 <UserSetOutline onClick={gotoAccount} />
286 |             </div>
287 |             </div>
288 |             { hasNotice ? <div className={styles['notice']}>
289 |                 <NoticeBar content={hasNotice} color='alert' closeable onClose={() => { setHasNotice('') }} />
290 |             </div> : null }
291 |             <div className={styles["middle"]} style={{ marginTop: hasNotice ? '85px' : '60px' }}>
292 |                 <div className={styles["chat-container"]}>
293 |                     <Messages
294 |                         retMsgs={[ ...retMsgs, answer ? { msg: answer, timestamp: answerTS } : null ].map(item => { item && (item.type = 'incoming'); return item })}
295 |                         outMsgs={outMsgs.map(item => { item && (item.type = 'outgoing'); return item })}
296 |                         userInfo={loginState}
297 |                         onItemDeleted={deleteItem}
298 |                         onEdit={editItem} />
299 |                     <div className={styles['chat-bottom-line']} ref={messagesEndRef}></div>
300 |                 </div>
301 |             </div>
302 |             <div className={styles["bottom-bar"]}>
303 |                 <div className={styles["prompt-container"]} style={{ visibility: typing ? 'hidden' : 'unset' }}>
304 |                     <Tag className={styles['prompt-tag']} onClick={(e) => { setSelectingPrompt(!selectingPrompt); }}>{ selectedPrompt?.label || '默认模式' }</Tag>
305 |                     { selectingPrompt ? <PromotSelect onConfirm={onChoosePrompt} value={selectedPrompt?.value} visible={selectingPrompt} onClose={() => { setSelectingPrompt(false) }} /> : null }
306 |                 </div>
307 |                 <div className={styles["chat"]}>
308 |                     {/* <Input type="text" value={question} onChange={inputQuestion} onEnterPress={directChat} placeholder="开始提问吧..." enterkeyhint="done" maxLength={300} autoFocus clearable /> */}
309 |                     <TextArea placeholder={selectedPrompt?.detail || '开始提问吧'}
310 |                         value={question}
311 |                         onChange={inputQuestion}
312 |                         rows={1}
313 |                         maxLength={300}
314 |                         autoSize={{ minRows: 1, maxRows: 8 }} 
315 |                         showCount
316 |                         autoFocus />
317 |                     {typing && <div className={styles["cancel-container"]}>
318 |                             <div className={styles['cancel']} onClick={onCancelChat}>
319 |                                 <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
320 |                                 取消
321 |                             </div>
322 |                         </div> 
323 |                     }
324 |                     {typing ?
325 |                         <div className={styles["typing"]}>
326 |                             <div className={styles["bubble"]}>
327 |                                 <div className={classnames(styles["ellipsis"], styles["one"])}></div>
328 |                                 <div className={classnames(styles["ellipsis"], styles["two"])}></div>
329 |                                 <div className={classnames(styles["ellipsis"], styles["three"])}></div>
330 |                             </div>
331 |                         </div> :
332 |                         <div className={styles["button-container"]}>
333 |                             <Button className={styles['button']} onClick={(e) => directChat(e)}  >
334 |                                 <PlayOutline />
335 |                             </Button>
336 |                         </div>    
337 |                     }
338 |                 </div>
339 |             </div>
340 |             <SafeArea position='bottom' />
341 |         </div>
342 |     </div>)
343 | }
344 | 
345 | export default ChatComponent;


--------------------------------------------------------------------------------
/components/Chat.module.scss:
--------------------------------------------------------------------------------
  1 | .top-bar .adm-space {
  2 |     height: 100%;
  3 |     width: 100%;
  4 | }
  5 | .adm-notice-bar {
  6 |     --height: 30px;
  7 | }
  8 | .adm-notice-bar.adm-notice-bar-alert {
  9 |     --background-color: #F9FBFF;
 10 |     --border-color: none;
 11 |     --text-color: #03915d;
 12 | }
 13 | .chat-container .adm-list-item,
 14 | .chat-container .adm-list-item-content,
 15 | .chat-container .adm-list-item-content-main {
 16 |     max-width: inherit;
 17 |     display: block;
 18 | }
 19 | .container {
 20 |     position: relative;
 21 |     margin: 0 auto;
 22 |     width: 100%;
 23 |     max-width: 620px;
 24 |     height: 100vh;
 25 |     text-align: left;
 26 |     background: #F9FBFF;
 27 | }
 28 | 
 29 | .messages {
 30 |     position: absolute;
 31 |     background: #F9FBFF;
 32 |     opacity: 0.5;
 33 |     width: 30%;
 34 |     height: 70%;
 35 |     top: 2.5%;
 36 |     left: 5%;
 37 |     border-radius: 10px 0 0 10px;
 38 |     box-shadow: -5px 5px 10px rgba(119, 119, 119, 0.5);
 39 | }
 40 | 
 41 | .chatbox {
 42 |     position: absolute;
 43 |     /* left: 35%; */
 44 |     height: 100%;
 45 |     width: 100%;
 46 |     border-radius: 10px;
 47 |     // box-shadow: 5px 5px 15px rgb(119 119 119 / 50%);
 48 |     display: flex;
 49 |     flex-direction: column;
 50 |     flex-wrap: nowrap;
 51 |     justify-content: space-between;
 52 |     align-items: stretch;
 53 |     max-width: inherit;
 54 | }
 55 | 
 56 | .top-bar {
 57 |     width: 100%;
 58 |     height: 60px;
 59 |     background: #F9FBFF;
 60 |     border-radius: 10px 10px 0 0;
 61 |     position: fixed;
 62 |     top: 0;
 63 |     z-index: 9;
 64 |     display: flex;
 65 |     justify-content: space-between;
 66 |     align-items: center;
 67 |     padding: 0 15px;
 68 |     box-sizing: border-box;
 69 |     max-width: inherit;
 70 | }
 71 | 
 72 | .bottom-bar {
 73 |     position: fixed;
 74 |     bottom: 0;
 75 |     width: 100%;
 76 |     /* height: 55px; */
 77 |     bottom: 0;
 78 |     background: #F9FBFF;
 79 |     border-radius: 0 0 10px 10px;
 80 |     z-index: 9;
 81 |     max-width: inherit;
 82 | }
 83 | .notice {
 84 |     position: fixed;
 85 |     top: 60px;
 86 |     height: 30px;
 87 |     width: 100%;
 88 |     z-index: 9;
 89 |     max-width: inherit;
 90 |     overflow: hidden;
 91 |     --height: 30px;
 92 | }
 93 | 
 94 | .avatar {
 95 |     width: 35px;
 96 |     height: 35px;
 97 |     background: linear-gradient(to bottom left, #79C7C5 20%, #A1E2D9 100%);
 98 |     border-radius: 50%;
 99 |     /* position: absolute; */
100 |     top: 11px;
101 |     left: 15px;
102 |     overflow: hidden;
103 | }
104 | 
105 | .avatar p {
106 |     color: #F9FBFF;
107 |     line-height: 35px;
108 |     box-sizing: border-box;
109 |     margin: 0;
110 |     text-align: center;
111 | }
112 | 
113 | .avatar {
114 |     img, svg {
115 |         height: 100%;
116 |         width: auto;
117 |         cursor: pointer;
118 |         display: flex;
119 |         justify-content: center;
120 |     }
121 | }
122 | 
123 | .name {
124 |     /* position: absolute; */
125 |     top: 22px;
126 |     text-transform: uppercase;
127 |     color: #777777;
128 |     font-size: 0.8em;
129 |     letter-spacing: 2px;
130 |     font-weight: 500;
131 |     left: 60px;
132 |     flex: 1 1 auto;
133 |     left: 60px;
134 |     text-align: center;
135 | }
136 | 
137 | .count {
138 |     color: #777777;
139 |     font-size: 0.8em;
140 |     letter-spacing: 2px;
141 |     font-weight: 500;
142 |     display: flex;
143 |     align-items: center;
144 |     justify-content: center;
145 |     flex: 1 1 auto;
146 | }
147 | 
148 | .count span {
149 |     color: #19c37d;
150 |     font-weight: bolder;
151 |     font-size: 0.9rem;
152 | }
153 | 
154 | .menu {
155 |     /* position: absolute; */
156 |     right: 10px;
157 |     top: 20px;
158 |     width: 66px;
159 |     height: 20px;
160 |     cursor: pointer;
161 |     display: flex;
162 |     justify-content: space-between;
163 |     flex-direction: row-reverse;
164 |     svg {
165 |         width: 20px;
166 |         height: 20px;
167 |         &:hover {
168 |             transform: scale(1.1);
169 |             transition: all 0.3s ease-in;
170 |         }
171 |     }
172 | }
173 | 
174 | 
175 | .icons {
176 |     position: absolute;
177 |     color: #A1E2D9;
178 |     padding: 10px;
179 |     top: 5px;
180 |     right: 21px;
181 |     cursor: pointer;
182 | }
183 | 
184 | .icons .fas {
185 |     padding: 5px;
186 |     opacity: 0.8;
187 | }
188 | 
189 | .icons .fas:hover {
190 |     transform: scale(1.1);
191 |     transition: all 0.3s ease-in;
192 | }
193 | 
194 | .dots {
195 |     width: 4px;
196 |     height: 4px;
197 |     border-radius: 50%;
198 |     background-color: #79C7C5;
199 |     box-shadow: 0px 7px 0px #79C7C5, 0px 14px 0px #79C7C5;
200 |     margin: 0 auto;
201 | }
202 | 
203 | .middle {
204 |     background: #F9FBFF;
205 |     width: 100%;
206 |     opacity: 1;
207 |     margin-top: 60px;
208 |     padding-bottom: 86px;
209 |     flex: 1 1 auto;
210 |     max-width: inherit;
211 | }
212 | .chat-container {
213 |     display: flex;
214 |     flex-direction: column;
215 |     padding: 12px;
216 |     --align-items: center;
217 |     max-width: inherit;
218 | }
219 | 
220 | .chat-bottom-line {
221 |     height: 0;
222 |     border-top: 1px solid #80808047;
223 |     margin: 2px 0 4px;
224 | }
225 | 
226 | /* .incoming {
227 |     position: absolute;
228 |     width: 50%;
229 |     height: 100%;
230 |     padding: 20px;
231 | } */
232 | 
233 | 
234 | .chat {
235 |     width: 100%;
236 |     display: flex;
237 |     justify-content: space-between;
238 |     padding: 8px 12px;
239 |     box-sizing: border-box;
240 |     position: relative;
241 | }
242 | 
243 | .left {
244 |     left: 0px;
245 | }
246 | 
247 | // input {
248 | //     padding: 7px;
249 | //     width: 74%;
250 | //     left: 5%;
251 | //     border: 0;
252 | //     top: 13px;
253 | //     background: #F9FBFF;
254 | //     color: #79C7C5;
255 | //     flex: 1 1 auto;
256 | //     box-sizing: border-box;
257 | //     font-size: 16px;
258 | // }
259 | 
260 | // input::placeholder {
261 | //     color: #A1E2D9;
262 | // }
263 | 
264 | // input:focus {
265 | //     color: #777777;
266 | //     outline: 0;
267 | // }
268 | .button-container {
269 |     position: relative;
270 | }
271 | 
272 | .button-container .button {
273 |     border: 0;
274 |     font-size: 1em;
275 |     color: #A1E2D9;
276 |     opacity: 0.8;
277 |     cursor: pointer;
278 |     outline: 0;
279 |     flex: 0 0 auto;
280 |     background-color: #ffffff;
281 |     box-shadow: 0 0 1px 1px #a1e2d9b8;
282 | }
283 | 
284 | .button-container .button:hover {
285 |     transform: scale(1.1);
286 |     transition: all 0.3s ease-in-out;
287 |     color: #79C7C5;
288 | }
289 | 
290 | .cancel-container {
291 |     position: absolute;
292 |     display: flex;
293 |     justify-content: center;
294 |     align-items: center;
295 |     width: 100%;
296 |     height: 100%;
297 |     top: 0;
298 |     left: 0;
299 |     max-width: 100%;
300 |     max-height: 100%;
301 |     background: #f8f8f8;
302 | }
303 | 
304 | .cancel-container .cancel {
305 |     background: #b2b2b2;
306 |     border: none;
307 |     width: 100px;
308 |     box-shadow: 0 0 3px 2px #9e9e9e75;
309 |     opacity: 0.9;
310 |     font-size: .875rem;
311 |     line-height: 1.25rem;
312 |     padding: 0.5rem 0.75rem;
313 |     display: flex;
314 |     justify-content: space-evenly;
315 |     align-items: center;
316 |     border-radius: 4px;
317 |     color: rgb(18, 150, 219);
318 | }
319 | 
320 | @keyframes bounce {
321 |     30% {
322 |         transform: translateY(-2px);
323 |     }
324 | 
325 |     60% {
326 |         transform: translateY(0px);
327 |     }
328 | 
329 |     80% {
330 |         transform: translateY(2px);
331 |     }
332 | 
333 |     100% {
334 |         transform: translateY(0px);
335 |         opacity: 0.5;
336 |     }
337 | }
338 | 
339 | .prompt-container {
340 |     border-bottom: 1px solid #a9a9a938;
341 |     padding-top: 4px;
342 |     margin: 0 12px;
343 |     display: flex;
344 |     align-items: center;
345 | }
346 | 
347 | .prompt-container .prompt-tag {
348 |     --background-color: #79C7C5 !important;
349 |     --border-color: #79C7C5 !important;
350 |     box-shadow: 0 0 3px 1px #9e9e9e75;
351 |     margin-right: 10px;
352 |     max-width: 120px;
353 |     overflow: hidden;
354 |     text-overflow: ellipsis;
355 |     white-space: nowrap;
356 |     --adm-font-size-3: 14px;
357 | }
358 | 
359 | 
360 | .typing {
361 |     position: absolute;
362 |     right: 10px;
363 |     top: 0px;
364 | }
365 | 
366 | .typing .bubble {
367 |     background: #eaeaea;
368 |     padding: 8px 13px 9px 13px;
369 | }
370 | 
371 | .ellipsis {
372 |     width: 5px;
373 |     height: 5px;
374 |     display: inline-block;
375 |     background: #b7b7b7;
376 |     border-radius: 50%;
377 |     animation: bounce 1.3s linear infinite;
378 | }
379 | 
380 | .one {
381 |     animation-delay: 0.6s;
382 | }
383 | 
384 | .two {
385 |     animation-delay: 0.5s;
386 | }
387 | 
388 | .three {
389 |     animation-delay: 0.8s;
390 | }
391 | 


--------------------------------------------------------------------------------
/components/Config.js:
--------------------------------------------------------------------------------
1 | export const appId = process.env.NEXT_PUBLIC_APP_ID;
2 | export const appToken = process.env.NEXT_PUBLIC_APP_TOKEN;
3 | export const enableAuth = process.env.NEXT_PUBLIC_ENABLE_AUTH === 'WebInfra';


--------------------------------------------------------------------------------
/components/DropDown.tsx:
--------------------------------------------------------------------------------
 1 | import { Menu, Transition } from "@headlessui/react";
 2 | import {
 3 |   CheckIcon,
 4 |   ChevronDownIcon,
 5 |   ChevronUpIcon,
 6 | } from "@heroicons/react/20/solid";
 7 | import { Fragment } from "react";
 8 | 
 9 | function classNames(...classes: string[]) {
10 |   return classes.filter(Boolean).join(" ");
11 | }
12 | 
13 | export type VibeType = "Professional" | "Casual" | "Funny";
14 | 
15 | interface DropDownProps {
16 |   vibe: VibeType;
17 |   setVibe: (vibe: VibeType) => void;
18 | }
19 | 
20 | let vibes: VibeType[] = ["Professional", "Casual", "Funny"];
21 | 
22 | export default function DropDown({ vibe, setVibe }: DropDownProps) {
23 |   return (
24 |     <Menu as="div" className="relative block text-left w-full">
25 |       <div>
26 |         <Menu.Button className="inline-flex w-full justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black">
27 |           {vibe}
28 |           <ChevronUpIcon
29 |             className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
30 |             aria-hidden="true"
31 |           />
32 |           <ChevronDownIcon
33 |             className="-mr-1 ml-2 h-5 w-5 hidden ui-open:block"
34 |             aria-hidden="true"
35 |           />
36 |         </Menu.Button>
37 |       </div>
38 | 
39 |       <Transition
40 |         as={Fragment}
41 |         enter="transition ease-out duration-100"
42 |         enterFrom="transform opacity-0 scale-95"
43 |         enterTo="transform opacity-100 scale-100"
44 |         leave="transition ease-in duration-75"
45 |         leaveFrom="transform opacity-100 scale-100"
46 |         leaveTo="transform opacity-0 scale-95"
47 |       >
48 |         <Menu.Items
49 |           className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
50 |           key={vibe}
51 |         >
52 |           <div className="">
53 |             {vibes.map((vibeItem) => (
54 |               <Menu.Item key={vibeItem}>
55 |                 {({ active }) => (
56 |                   <button
57 |                     onClick={() => setVibe(vibeItem)}
58 |                     className={classNames(
59 |                       active ? "bg-gray-100 text-gray-900" : "text-gray-700",
60 |                       vibe === vibeItem ? "bg-gray-200" : "",
61 |                       "px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between"
62 |                     )}
63 |                   >
64 |                     <span>{vibeItem}</span>
65 |                     {vibe === vibeItem ? (
66 |                       <CheckIcon className="w-4 h-4 text-bold" />
67 |                     ) : null}
68 |                   </button>
69 |                 )}
70 |               </Menu.Item>
71 |             ))}
72 |           </div>
73 |         </Menu.Items>
74 |       </Transition>
75 |     </Menu>
76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function Footer() {
 4 |   return (
 5 |     <footer className="text-center h-16 sm:h-20 w-full sm:pt-2 pt-4 border-t mt-5 flex sm:flex-row flex-col justify-between items-center px-3 space-y-3 sm:mb-0 mb-3">
 6 |       <div>
 7 |         Powered by{" "}
 8 |         <a
 9 |           href="https://openai.com/blog/chatgpt"
10 |           target="_blank"
11 |           rel="noreferrer"
12 |           className="font-bold hover:underline transition underline-offset-2"
13 |         >
14 |           ChatGPT{" "}
15 |         </a>
16 |         and{" "}
17 |         <a
18 |           href="https://vercel.com/"
19 |           target="_blank"
20 |           rel="noreferrer"
21 |           className="font-bold hover:underline transition underline-offset-2"
22 |         >
23 |           Vercel
24 |         </a>
25 |       </div>
26 |       <div className="flex space-x-4 pb-4 sm:pb-0">
27 |         <Link
28 |           href="https://bento.me/yin-yang-hu"
29 |           className="group"
30 |           aria-label="About me"
31 |         >
32 |           <svg
33 |             aria-hidden="true"
34 |             className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
35 |           >
36 |             <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
37 |           </svg>
38 |         </Link>
39 |         <Link
40 |           href="https://github.com/"
41 |           className="group"
42 |           aria-label="on GitHub"
43 |         >
44 |           <svg
45 |             aria-hidden="true"
46 |             className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
47 |           >
48 |             <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
49 |           </svg>
50 |         </Link>
51 |       </div>
52 |     </footer>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/components/GitHub.tsx:
--------------------------------------------------------------------------------
 1 | export default function Github({ className }: { className?: string }) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       width="20"
 6 |       height="20"
 7 |       fill="currentColor"
 8 |       viewBox="0 0 24 24"
 9 |       className={className}
10 |     >
11 |       <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
12 |     </svg>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | 
 4 | export default function Header() {
 5 |   return (
 6 |     <header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
 7 |       <Link href="/" className="flex space-x-3">
 8 |         <Image
 9 |           alt="header text"
10 |           src="/writingIcon.png"
11 |           className="sm:w-12 sm:h-12 w-8 h-8"
12 |           width={32}
13 |           height={32}
14 |         />
15 |         <h1 className="sm:text-4xl text-2xl font-bold ml-2 tracking-tight">
16 |           twitterBio.com
17 |         </h1>
18 |       </Link>
19 |       <a
20 |         href="https://vercel.com/templates/next.js/twitter-bio"
21 |         target="_blank"
22 |         rel="noreferrer"
23 |       >
24 |         <Image
25 |           alt="Vercel Icon"
26 |           src="/vercelLogo.png"
27 |           className="sm:w-8 sm:h-[27px] w-8 h-[28px]"
28 |           width={32}
29 |           height={28}
30 |         />
31 |       </a>
32 |     </header>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/components/LoadingDots.tsx:
--------------------------------------------------------------------------------
 1 | import styles from "../styles/loading-dots.module.css";
 2 | 
 3 | const LoadingDots = ({
 4 |   color = "#000",
 5 |   style = "small",
 6 | }: {
 7 |   color: string;
 8 |   style: string;
 9 | }) => {
10 |   return (
11 |     <span className={style == "small" ? styles.loading2 : styles.loading}>
12 |       <span style={{ backgroundColor: color }} />
13 |       <span style={{ backgroundColor: color }} />
14 |       <span style={{ backgroundColor: color }} />
15 |     </span>
16 |   );
17 | };
18 | 
19 | export default LoadingDots;
20 | 
21 | LoadingDots.defaultProps = {
22 |   style: "small",
23 | };
24 | 


--------------------------------------------------------------------------------
/components/Messages.js:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import dynamic from 'next/dynamic'
  3 | import React, { useEffect, useState } from 'react';
  4 | import { createRoot } from 'react-dom/client';
  5 | import { flushSync } from 'react-dom';
  6 | import classnames from 'classnames';
  7 | import { List, Toast } from 'antd-mobile'
  8 | import { UserOutline, EditSOutline } from 'antd-mobile-icons'
  9 | import { fetch as fetchPolyfill } from 'whatwg-fetch'
 10 | import ReactMarkdown from 'react-markdown'
 11 | import { CopyBtn, DeleteBtn } from './Shapes';
 12 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 13 | import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 14 | import styles from './Messages.module.css'
 15 | 
 16 | const Messages = (props) => {
 17 |     console.log('msg got props: ', props);
 18 |     const { retMsgs, outMsgs, userInfo, onItemDeleted, onEdit } =  props?.props || props || {};
 19 |     const [activeMsgId, setActiveMsgId] = useState(null);
 20 | 
 21 |     const toggleActiveItem = (id) => {
 22 |         return (e) => {
 23 |             e.preventDefault();
 24 |             if (!id) return;
 25 |             if (id === activeMsgId) {
 26 |                 setActiveMsgId(null)
 27 |             } else {
 28 |                 setActiveMsgId(id);
 29 |             }
 30 |         }
 31 |     }
 32 | 
 33 |     const rewriteItem = (text) => {
 34 |         return (e) => {
 35 |             e.preventDefault();
 36 |             e.stopPropagation();
 37 |             navigator.clipboard.writeText(text)
 38 |             onEdit && onEdit(text);
 39 |         }
 40 |     }
 41 | 
 42 |     const copyItem = (text, content = '内容已复制到剪贴板') => {
 43 |         return (e) => {
 44 |             e.preventDefault();
 45 |             e.stopPropagation();
 46 |             navigator.clipboard.writeText(text)
 47 |             Toast.show({
 48 |                 icon: 'success',
 49 |                 content: content,
 50 |             })
 51 |         }
 52 |     }
 53 | 
 54 |     const deleteItem = (id, type) => {
 55 |         return (e) => {
 56 |             e.preventDefault();
 57 |             e.stopPropagation();
 58 |             console.log('deleting item ', id)
 59 |             onItemDeleted && onItemDeleted(id, type);
 60 |         }
 61 |     }
 62 | 
 63 |     useEffect(() => {
 64 |         const { retMsgs, collecting } =  props?.props || props || {};
 65 |         if (collecting) {
 66 |             return;
 67 |         }
 68 |         if (retMsgs) {
 69 |             const retMsgList = retMsgs.filter(item => !!item?.timestamp).sort((itemA, itemB) => (itemA?.timestamp - itemB.timestamp));
 70 |             setActiveMsgId(retMsgList[retMsgList.length - 1]?.id)
 71 |         }
 72 |     }, [props]);
 73 | 
 74 |     if ([...retMsgs, ...outMsgs].filter(item => !!item).length === 0) {
 75 |         return <div className={styles['placeholder-content']}>
 76 |             <span>Hello！I'm a smart chat robot ^_^！</span><br/>
 77 |             <span className={styles['description']}>This site is free to use and is only intended for learning and testing purposes.</span><br />
 78 |             <span className={styles['description']}>It is strictly prohibited to publish or distribute any illegal or inappropriate content on this website.</span>
 79 |         </div>
 80 |     }
 81 |     return (
 82 |         [
 83 |             ...retMsgs,
 84 |             ...outMsgs,
 85 |         ]
 86 |         .filter(item => !!item?.msg)
 87 |         .map(item => { if (!item.timestamp) { item.timestamp = new Date().valueOf() - 1000 * 100000}; return item; })
 88 |         .sort((itemA, itemB) => (itemA?.timestamp - itemB.timestamp))
 89 |             .map(ret => (
 90 |                 <List.Item
 91 |                     key={ret.type + ret.id + ret.timestamp}
 92 |                     style={{ display: 'block' }}
 93 |                     arrow={false}>
 94 |                     <div className={classnames(styles['talking-item'], styles[ret.type])} key={ret.msg + ret.timestamp} onClick={toggleActiveItem(ret.id)}>
 95 |                         <div className={styles['talking-avatar']}>
 96 |                             {
 97 |                                 ret.type === 'incoming' ?
 98 |                                     <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5">
 99 |                                         <path d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z" fill="currentColor">
100 |                                         </path>
101 |                                     </svg> :
102 |                                     (userInfo?.avatar ? <img alt='avatar' src={userInfo?.avatar}></img> : <UserOutline style={{ fontSize: 24 }} />)
103 |                             }
104 |                         </div>
105 |                         <div className={styles[`bubble`]} key={ret.msg}>
106 |                             <ReactMarkdown
107 |                                     children={ret.msg}
108 |                                     components={{
109 |                                         code({ node, inline, className, children, ...props }) {
110 |                                             const match = /language-(\w+)/.exec(className || '')
111 |                                             return !inline && match ? (
112 |                                                 <div>
113 |                                                     <div className={styles['codebox-handler']}><span>{match[1]}</span><span> <CopyBtn onClick={copyItem(String(children).replace(/\n$/, ''), '代码已复制到剪贴板')} /></span></div>
114 |                                                     <SyntaxHighlighter
115 |                                                         children={String(children).replace(/\n$/, '')}
116 |                                                         style={vscDarkPlus}
117 |                                                         language={match[1]}
118 |                                                         PreTag="div"
119 |                                                         customStyle={{
120 |                                                             margin: '0px'
121 |                                                         }}
122 |                                                         {...props}
123 |                                                     />
124 |                                                 </div>
125 |                                             ) : (
126 |                                                 <code className={className} {...props}>
127 |                                                     {children}
128 |                                                 </code>
129 |                                             )
130 |                                         }
131 |                                     }}
132 |                                 />
133 |                             {activeMsgId === ret.id ? <div className={styles['talking-item-btns']} style={{justifyContent: ret.type === 'incoming' ? 'flex-end' : 'flex-start' }}>
134 |                                 <CopyBtn onClick={copyItem(ret.msg)} />
135 |                                 <DeleteBtn onClick={deleteItem(ret.id, ret.type)} />
136 |                                 { ret.type === 'incoming' ? null : <EditSOutline onClick={rewriteItem(ret.msg)} /> }
137 |                             </div> : null}
138 |                         </div>
139 |                     </div>
140 |                 </List.Item>))
141 |     )
142 | }
143 | 
144 | 
145 | export const getShareHTML = async (props) => {
146 |     const div = document.createElement('div');
147 |     const root = createRoot(div);
148 |     const { userInfo } = props?.props || props || {}
149 |     flushSync(() => {
150 |       root.render(<div className="chatbox">
151 |         <div className="top-bar">
152 |             <div className="avatar">
153 |                 {
154 |                     userInfo?.avatar ? <img alt='avatar' src={userInfo?.avatar} /> : <p>{ (userInfo?.name?.slice(0, 1) || 'C').toUpperCase() }</p>
155 |                 }
156 |             </div>
157 |             <div className="name">ChatGPT - @webinfra</div>
158 |         </div>
159 |         <div className="middle">
160 |             <div className="chat-container">
161 |                 <Messages props={props} />
162 |             </div>
163 |         </div>
164 |       </div>);
165 |     });
166 |     console.log('html contents got');
167 | 
168 |     const allCssStylesheetsLinks = [];
169 |     const stylesheets = document.styleSheets;
170 | 
171 |     // looping through each stylesheet
172 |     // and checksing if there is href property in each item
173 |     for (let i = 0; i < stylesheets.length; i++) {
174 |         if (stylesheets[i].href) {
175 |             // prod
176 |             allCssStylesheetsLinks.push(stylesheets[i].href);
177 |         } else {
178 |             // dev
179 |             // TODO: collect styles
180 |         }
181 |     }
182 | 
183 |     const promiseList = allCssStylesheetsLinks.map(ssUrl => {
184 |         console.log('fetching...', ssUrl, fetchPolyfill);
185 |         if (!ssUrl) return '';
186 |         return fetchPolyfill(ssUrl, {
187 |             headers: {
188 |                 'Content-Type': 'text/css'
189 |             }
190 |         })
191 |         .then(resp => resp.text())
192 |         .then(resp => {
193 |             console.log('load external css contents: ');
194 |             return `<style>${resp}</style>`
195 |         })
196 |         .catch(err => {
197 |             console.error('fetchPolyfill css failed: ', err);
198 |             return '';
199 |         })
200 |     });
201 |     const loadedStyles = await Promise.all(promiseList).then(list => list.join(''));
202 | 
203 |     const htmlPre = `<!DOCTYPE html>
204 |     <html lang="en">
205 |       <head>
206 |         <meta charset="utf-8" />
207 |         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
208 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
209 |         <title>ChatGPT Service</title>
210 |         ${loadedStyles}
211 |       </head>
212 |       <body>
213 |         <noscript>You need to enable JavaScript to run this app.</noscript>
214 |         <div id="root">${div.innerHTML}
215 |         </div>
216 |       </body>
217 |     </html>
218 |     `
219 |     return htmlPre;
220 | }
221 | 
222 | 
223 | export default dynamic(() => Promise.resolve(Messages), {
224 |     ssr: false
225 |   })
226 | // export default Messages;


--------------------------------------------------------------------------------
/components/Messages.module.css:
--------------------------------------------------------------------------------
  1 | .codebox-handler {
  2 |     --tw-text-opacity: 1;
  3 |     color: rgba(217, 217, 227, var(--tw-text-opacity));
  4 |     --tw-bg-opacity: 0.6;
  5 |     background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
  6 |     display: flex;
  7 |     justify-content: space-between;
  8 |     align-items: center;
  9 |     padding: 0 10px;
 10 |     border-top-right-radius:5px;
 11 |     border-top-left-radius:5px;
 12 |     line-height: 32px;
 13 | }
 14 | 
 15 | .codebox-handler span {
 16 |     display: flex;
 17 | }
 18 | 
 19 | .placeholder-content {
 20 |     text-align: center;
 21 |     text-align: center;
 22 |     position: absolute;
 23 |     margin: 0 auto;
 24 |     top: 50%;
 25 |     left: 0;
 26 |     transform: translateY(-50%);
 27 |     line-height: 2rem;
 28 |     font-size: large;
 29 |     font-weight: bolder;
 30 |     color: #000;
 31 | }
 32 | 
 33 | .placeholder-content > .description {
 34 |     font-size: small;
 35 |     color: #0000009c;
 36 | }
 37 | 
 38 | .incoming.bubble {
 39 |     background: #b2b2b2;
 40 | }
 41 | 
 42 | .talking-item {
 43 |     position: relative;
 44 |     display: inline-block;
 45 |     width: fit-content;
 46 |     box-sizing: border-box;
 47 |     max-width: calc(100% - 30px);
 48 |     margin: 5px;
 49 |     font-size: 0.7em;
 50 |     padding: 10px 10px 10px 12px;
 51 |     border-radius: 20px; 
 52 |     display: flex;
 53 |     flex-direction: row;
 54 |     align-items: center;
 55 |     color: #19c37d;
 56 |     box-shadow: 0 0 3px 2px #9e9e9e75;
 57 | }
 58 | .talking-avatar {
 59 |     width: 24px;
 60 |     height: 24px;
 61 |     border-radius: 50%;
 62 |     margin-left: 0;
 63 |     margin-right: 5px;
 64 | }
 65 | 
 66 | .talking-avatar img,
 67 | .talking-avatar svg {
 68 |     height: 100%;
 69 |     width: auto;
 70 | }
 71 | 
 72 | .talking-item-btns {
 73 |     padding: 4px 4px 0;
 74 |     display: flex;
 75 |     flex-direction: row;
 76 | }
 77 | .talking-item-btns > svg, .talking-item-btn {
 78 |     width: 16px;
 79 |     height: 16px;
 80 |     display: block;
 81 |     margin: 0px 8px;
 82 |     color: rgb(18, 150, 219);
 83 | }
 84 | .delete-btn {
 85 |     width: 16px;
 86 |     height: 16px;
 87 |     display: block;
 88 |     margin: 6px 8px;
 89 | }
 90 | 
 91 | .bubble {
 92 |     position: relative;
 93 |     display: inline-block;
 94 |     width: fit-content;
 95 |     margin: 5px;
 96 |     color: #F9FBFF;
 97 |     border-radius: 2px;
 98 |     text-align: left;
 99 |     font-size: 14px;
100 |     overflow-x: scroll;
101 | }
102 | .bubble::-webkit-scrollbar {
103 |     display: none;
104 |     -ms-overflow-style: none;  /* IE and Edge */
105 | }
106 | .bubble p {
107 |     word-break: break-all;
108 | }
109 |   
110 | 
111 | .lower {
112 |     margin-top: 45px;
113 | }
114 | 
115 | /* .outgoing {
116 |     position: absolute;
117 |     padding: 20px;
118 |     right: 0;
119 |     top: 15%;
120 |     width: 50%;
121 |     height: 100%;
122 | } */
123 | 
124 | .outgoing.talking-item {
125 |     background: #79C7C5;
126 |     float: right;
127 |     text-align: right;
128 |     align-self: flex-end;
129 |     flex-direction: row-reverse;
130 | }
131 | .outgoing .talking-avatar {
132 |     margin-right: 0;
133 |     margin-left: 5px;
134 | }
135 | 
136 | .incoming.talking-item {
137 |     background: #b2b2b2;
138 | }
139 | 


--------------------------------------------------------------------------------
/components/PromptElement.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react'
  2 | import { Popup, Radio, Space, Button, Collapse, SafeArea } from 'antd-mobile'
  3 | import { EditSOutline } from 'antd-mobile-icons'
  4 | import { DotLoading } from 'antd-mobile'
  5 | import { CheckShieldOutline, CheckShieldFill } from 'antd-mobile-icons'
  6 | // import { useNavigate } from 'react-router-dom'
  7 | import { useLocalStorage } from '../utils/Others';
  8 | import './PromptElement.module.css'
  9 | 
 10 | const DefaultPromptList = [
 11 |     {
 12 |         label: '默认模式',
 13 |         detail: '不设置任何预选prompt，直接开始提问吧',
 14 |         value: 0,
 15 |         prompt: '',
 16 |     },
 17 |     {
 18 |         "label": "中英互译",
 19 |         "detail": "英汉互译 + 可定制风格 + 可学习英语",
 20 |         "value": 1,
 21 |         "prompt": "As an English-Chinese translator, your task is to accurately translate text between the two languages. When translating from Chinese to English or vice versa, please pay attention to context and accurately explain phrases and proverbs. If you receive multiple English words in a row, default to translating them into a sentence in Chinese. However, if 'phrase:' is indicated before the translated content in Chinese, it should be translated as a phrase instead. Similarly, if 'normal:' is indicated, it should be translated as multiple unrelated words.Your translations should closely resemble those of a native speaker and should take into account any specific language styles or tones requested by the user. Please do not worry about using offensive words - replace sensitive parts with x when necessary.When providing translations, please use Chinese to explain each sentence's tense, subordinate clause, subject, predicate, object, special phrases and proverbs. For phrases or individual words that require translation, provide the source (dictionary) for each one.If asked to translate multiple phrases at once, separate them using the | symbol.Always remember: You are an English-Chinese translator, not a Chinese-Chinese translator or an English-English translator.Please review and revise your answers carefully before submitting."
 22 |     },
 23 |     {
 24 |         "label": "写作助理",
 25 |         "detail": "个人最常使用的 prompt，可用于改进文字段落和句式",
 26 |         "value": 2,
 27 |         "prompt": "As a writing improvement assistant, your task is to improve the spelling, grammar, clarity, concision, and overall readability of the text provided, while breaking down long sentences, reducing repetition, and providing suggestions for improvement. Please provide only the corrected Chinese version of the text and avoid including explanations. Please begin by editing the following text:"
 28 |     },
 29 |     {
 30 |         "label": "周报生成",
 31 |         "detail": "根据日常工作内容，提取要点并适当扩充，以生成周报",
 32 |         "value": 3,
 33 |         "prompt": "Using the provided text below as the basis for a weekly report in Chinese, generate a concise summary that highlights the most important points. The report should be written in markdown format and should be easily readable and understandable for a general audience. In particular, focus on providing insights and analysis that would be useful to stakeholders and decision-makers. You may also use any additional information or sources as necessary. Please begin by editing the following text:"
 34 |     }
 35 | ]
 36 | 
 37 | export const getPrompts = async () => {
 38 |     return Promise.resolve(DefaultPromptList)
 39 | }
 40 | 
 41 | function PromotSelect(props) {
 42 |     // const navigate = useNavigate()
 43 |     const [loading, setLoading] = useState(false)
 44 |     const [visible, setVisible] = useState(props.visible)
 45 |     const [value, setValue] = useState(props.value || 0)
 46 |     const [promptList, setPromptList] = useLocalStorage('promps-list-lcal', []);
 47 |     const [cachedTime, setCachedTime] = useLocalStorage('promps-list-lcal-time', 0);
 48 |     const [customPromptList] = useLocalStorage('custom-promps-list-lcal', []);
 49 | 
 50 |     const closeView = () => {
 51 |         console.log('closing view');
 52 |         setVisible(false)
 53 |         props.onClose();
 54 |     }
 55 |     useEffect(() => {
 56 |         if ((promptList?.length > 0) && (new Date().valueOf() < cachedTime + 1000 * 60 * 10)) {
 57 |             // skip loading
 58 |             console.log('skip loading...')
 59 |             return;
 60 |         }
 61 |         setLoading(true)
 62 |         getPrompts().then(list => {
 63 |             setPromptList([...list])
 64 |             setCachedTime(new Date().valueOf())
 65 |             setLoading(false)
 66 |         }).catch(err => {
 67 |                 setLoading(false);
 68 |             });
 69 |     }, [])
 70 | 
 71 |     const onAddPrompt = (e) => {
 72 |         e.preventDefault()
 73 |         // navigate('/build/editPrompt')
 74 |     }
 75 | 
 76 |     return (
 77 |         <>
 78 |             <Popup
 79 |                 visible={visible}
 80 |                 onMaskClick={closeView}
 81 |                 onClose={closeView}
 82 |                 showCloseButton
 83 |                 position='left'
 84 |                 bodyStyle={{ width: '60vw' }}
 85 |             > 
 86 |                 <div style={{ position: "relative", paddingBottom: '50px', height: '100vh', overflow: 'scroll' }}> 
 87 |                         {
 88 |                             loading ? <div
 89 |                                 style={{
 90 |                                     background: '#f5f5f5',
 91 |                                     height: '100%',
 92 |                                     display: 'flex',
 93 |                                     justifyContent: 'center',
 94 |                                     alignItems: 'center',
 95 |                                     flexDirection: 'column',
 96 |                                 }}
 97 |                             >
 98 |                                 <DotLoading color="primary" />
 99 |                                 加载中
100 |                             </div> :
101 |                                 <div className='prompt-list-container'>
102 |                                     <Collapse defaultActiveKey={['1','2']}>
103 |                                         <Collapse.Panel key='1' title='默认场景'>
104 |                                             <Radio.Group
105 |                                                 defaultValue='0'
106 |                                                 value={value}
107 |                                                 onChange={val => {
108 |                                                     setValue(val)
109 |                                                     console.log('on value chagned: ', val);
110 |                                                     if (props.onConfirm) {
111 |                                                         const data = promptList.find(p => p.value === val);
112 |                                                         props.onConfirm(data);
113 |                                                     }
114 |                                                     closeView()
115 |                                                 }}>
116 |                                                
117 |                                                     <div className='prompt-block'>
118 |                                                         <Space direction='vertical' justify='start' block>
119 |                                                             {promptList.map((p) => (<Radio
120 |                                                                 key={p.value}
121 |                                                                 value={p.value}
122 |                                                                 icon={checked =>
123 |                                                                     checked ? (
124 |                                                                         <CheckShieldFill style={{ color: 'var(--adm-color-primary)' }} />
125 |                                                                     ) : (
126 |                                                                         <CheckShieldOutline style={{ color: 'var(--adm-color-weak)' }} />
127 |                                                                     )
128 |                                                                 }
129 |                                                                 style={{
130 |                                                                     '--icon-size': '22px',
131 |                                                                     '--font-size': '16px',
132 |                                                                     '--gap': '8px',
133 |                                                                 }}>
134 |                                                                     <span>{p.label}</span>
135 |                                                             </Radio>))}
136 |                                                         </Space>
137 |                                                     </div>
138 |                                             </Radio.Group>
139 |                                         </Collapse.Panel>
140 |                                         {customPromptList.length > 0 && <Collapse.Panel key='2' title='自定义场景'>
141 |                                             <Radio.Group
142 |                                             defaultValue='0'
143 |                                             value={value}
144 |                                             onChange={val => {
145 |                                                 setValue(val)
146 |                                                 console.log('on value chagned: ', val);
147 |                                                 if (props.onConfirm) {
148 |                                                     const data = customPromptList.find(p => p.value === val);
149 |                                                     console.log('data:', data)
150 |                                                     props.onConfirm(data);
151 |                                                 }
152 |                                                 closeView()
153 |                                             }}>
154 |                                             <div className='prompt-block'>
155 |                                                     <Space direction='vertical' justify='start' block>
156 |                                                         {customPromptList.map((p) => (<Radio
157 |                                                             key={p.value}
158 |                                                             value={p.value}
159 |                                                             icon={checked =>
160 |                                                                 checked ? (
161 |                                                                     <CheckShieldFill style={{ color: 'var(--adm-color-primary)' }} />
162 |                                                                 ) : (
163 |                                                                     <CheckShieldOutline style={{ color: 'var(--adm-color-weak)' }} />
164 |                                                                 )
165 |                                                             }
166 |                                                             style={{
167 |                                                                 '--icon-size': '22px',
168 |                                                                 '--font-size': '16px',
169 |                                                                 '--gap': '8px',
170 |                                                             }}>
171 |                                                                 <span>{p.label}</span>
172 |                                                                 <span style={{position: 'absolute', right: '0', color: '#999999'}}>
173 |                                                                     <EditSOutline onClick={(e) => {
174 |                                                                         e.preventDefault()
175 |                                                                         e.stopPropagation()
176 |                                                                         // navigate(`/build/editPrompt/${p.value}`)
177 |                                                                     }} />
178 |                                                                 </span>
179 |                                                         </Radio>))}
180 |                                                     </Space>
181 |                                                 </div>
182 |                                         </Radio.Group>
183 |                                     </Collapse.Panel>}
184 |                                 </Collapse>
185 |                             </div>
186 |                         }
187 |                     </div>
188 |                   
189 |                     <div style={{ position: 'fixed', bottom: 0, width: '100%', height: '50px', background: '#fff' }}>
190 |                         <div style={{
191 |                             width: '100%',
192 |                             display: 'flex',
193 |                             alignItems: 'center',
194 |                             justifyContent: 'center'}}>
195 |                         <Button style={{width: '90%'}}  block shape='rounded' color='primary' onClick={(e) => onAddPrompt(e)}>
196 |                             新增场景
197 |                         </Button>
198 |                     </div>
199 |                     <SafeArea position='bottom' />
200 |             </div>
201 |         </Popup>
202 | 
203 |         </>
204 | 
205 |     )
206 | }
207 | 
208 | export default PromotSelect;


--------------------------------------------------------------------------------
/components/PromptElement.module.css:
--------------------------------------------------------------------------------
 1 | .prompt-list-container {
 2 |     padding: 40px 16px;
 3 | }
 4 | 
 5 | .prompt-block {
 6 |     position: relative;
 7 |     margin-bottom: 12px;
 8 | }
 9 | 
10 | .prompt-block .title {
11 |     padding: 12px 0 8px;
12 |     color: #697b8c;
13 |     font-size: 16px;
14 | }
15 | 
16 | .prompt-block .split-line {
17 |     height: 0;
18 |     border-top: 1px solid #80808047;
19 |     margin: 2px 0 4px;
20 | }
21 | 
22 | 


--------------------------------------------------------------------------------
/components/Shapes.js:
--------------------------------------------------------------------------------
1 | export const CopyBtn = ({ ...props}) => {
2 |     return <svg t="1678179028170" className="talking-item-btn" onClick={props?.onClick} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5412" width="128" height="128"><path d="M746.932 698.108" fill="#1296db" p-id="5413"></path><path d="M925.731 288.698c-1.261-1.18-3.607-3.272-6.902-6.343-5.486-5.112-11.615-10.758-18.236-16.891-18.921-17.526-38.003-35.028-56.046-51.397-2.038-1.848-2.038-1.835-4.077-3.682-24.075-21.795-44.156-39.556-58.996-52.076-8.682-7.325-15.517-12.807-20.539-16.426-3.333-2.402-6.043-4.13-8.715-5.396-3.365-1.595-6.48-2.566-10.905-2.483C729.478 134.227 720 143.77 720 155.734l0 42.475 0 42.475 0 84.95L720 347l21.205 0L890 347l0 595L358.689 942C323.429 942 295 913.132 295 877.922L295 177l361.205 0c11.736 0 21.25-9.771 21.25-21.5s-9.514-21.5-21.25-21.5l-382.5 0L252 134l0 21.734L252 813l-52.421 0C166.646 813 140 786.928 140 754.678L140 72l566.286 0C739.29 72 766 98.154 766 130.404L766 134l40 0 0-3.596C806 76.596 761.271 33 706.286 33L119.958 33 100 33l0 19.506 0 702.172C100 808.463 144.642 852 199.579 852L252 852l0 25.922C252 936.612 299.979 984 358.689 984l552.515 0L932 984l0-21.237L932 325.635 932 304l0.433 0C932.432 299 930.196 292.878 925.731 288.698zM762 304l0-63.315L762 198.21l0-0.273c14 11.479 30.3 26.369 49.711 43.942 2.022 1.832 2.136 1.832 4.157 3.665 17.923 16.259 36.957 33.492 55.779 50.926 2.878 2.666 5.713 5.531 8.391 7.531L762 304.001z" fill="#1296db" p-id="5414"></path><path d="M816.936 436 407.295 436c-10.996 0-19.91 8.727-19.91 19.5 0 10.77 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.73 19.914-19.5C836.85 444.727 827.936 436 816.936 436z" fill="#1296db" p-id="5415"></path><path d="M816.936 553 407.295 553c-10.996 0-19.91 8.727-19.91 19.5 0 10.774 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.726 19.914-19.5C836.85 561.727 827.936 553 816.936 553z" fill="#1296db" p-id="5416"></path><path d="M816.936 689 407.295 689c-10.996 0-19.91 8.729-19.91 19.503 0 10.769 8.914 19.497 19.91 19.497l409.641 0c11 0 19.914-8.729 19.914-19.497C836.85 697.729 827.936 689 816.936 689z" fill="#1296db" p-id="5417"></path></svg>
3 | }
4 | 
5 | export const DeleteBtn = ({ ...props}) => {
6 |     return <svg t="1678178945996" className="talking-item-btn" onClick={props?.onClick} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4375" width="128" height="128"><path d="M768 384c-19.2 0-32 12.8-32 32l0 377.6c0 25.6-19.2 38.4-38.4 38.4L326.4 832c-25.6 0-38.4-19.2-38.4-38.4L288 416C288 396.8 275.2 384 256 384S224 396.8 224 416l0 377.6c0 57.6 44.8 102.4 102.4 102.4l364.8 0c57.6 0 102.4-44.8 102.4-102.4L793.6 416C800 396.8 787.2 384 768 384z" fill="#1296db" p-id="4376"></path><path d="M460.8 736l0-320C460.8 396.8 448 384 435.2 384S396.8 396.8 396.8 416l0 320c0 19.2 12.8 32 32 32S460.8 755.2 460.8 736z" fill="#1296db" p-id="4377"></path><path d="M627.2 736l0-320C627.2 396.8 608 384 588.8 384S563.2 396.8 563.2 416l0 320C563.2 755.2 576 768 588.8 768S627.2 755.2 627.2 736z" fill="#1296db" p-id="4378"></path><path d="M832 256l-160 0L672 211.2C672 166.4 633.6 128 588.8 128L435.2 128C390.4 128 352 166.4 352 211.2L352 256 192 256C172.8 256 160 268.8 160 288S172.8 320 192 320l640 0c19.2 0 32-12.8 32-32S851.2 256 832 256zM416 211.2C416 198.4 422.4 192 435.2 192l153.6 0c12.8 0 19.2 6.4 19.2 19.2L608 256l-192 0L416 211.2z" fill="#1296db" p-id="4379"></path></svg>
7 | }


--------------------------------------------------------------------------------
/components/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/components/notice.js:
--------------------------------------------------------------------------------
 1 | import { fetch } from 'whatwg-fetch'
 2 | import { HOST_URL } from './config'
 3 | 
 4 | export const getNotice = async () => {
 5 |     return fetch(`${HOST_URL}/notice.json`)
 6 |     .then(resp => resp.json())
 7 |     .then(resp => {
 8 |         console.log('resp: ', resp);
 9 |         return resp?.contents;
10 |     })
11 |     .catch(err => {
12 |         console.error('getting notice failed: ', err);
13 |         return '因多条线路被封，可能消息响应速度较慢，请耐心等待'
14 |     })
15 | }
16 | 


--------------------------------------------------------------------------------
/components/share.js:
--------------------------------------------------------------------------------
1 | 
2 | const ShareLogo = ({ ...props }) => {
3 |     return <svg onClick={props?.onClick} t="1678153904292" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3169" width="128" height="128"><path d="M465.066667 85.333333a42.666667 42.666667 0 0 1 0 85.333334H256a85.333333 85.333333 0 0 0-85.333333 85.333333v512a85.333333 85.333333 0 0 0 85.333333 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333v-85.333333a42.666667 42.666667 0 0 1 85.333334 0v85.333333a170.666667 170.666667 0 0 1-170.666667 170.666667H256a170.666667 170.666667 0 0 1-170.666667-170.666667V256a170.666667 170.666667 0 0 1 170.666667-170.666667h209.066667z" fill="#13227a" opacity=".3" p-id="3170"></path><path d="M298.88 592.938667c0-32.512-6.997333-160.938667 94.293333-262.826667 68.224-68.608 170.24-80.469333 292.266667-85.888V78.421333a32 32 0 0 1 53.504-23.722666l277.717333 251.946666a32 32 0 0 1 0.213334 47.189334l-277.674667 257.152a32 32 0 0 1-53.76-23.466667V422.741333c-77.482667 2.133333-132.693333 7.04-182.784 22.997334-71.893333 22.869333-127.530667 87.552-166.912 194.133333a32 32 0 0 1-29.994667 20.906667H298.666667c0-19.626667 0.213333-50.602667 0.213333-67.84z" fill="#13227a" p-id="3171"></path></svg>
4 | }
5 | 
6 | export default ShareLogo;


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
  1 | /** @type {import('next').NextConfig} */
  2 | // const SSRPlugin = require("next/dist/build/webpack/plugins/nextjs-ssr-import")
  3 | //   .default;
  4 | // const { dirname, relative, resolve, join } = require("path");
  5 | 
  6 | const conf = {
  7 |   reactStrictMode: false,
  8 |   swcMinify: true,
  9 |   async redirects() {
 10 |     return [
 11 |       {
 12 |         source: "/github",
 13 |         destination: "https://github.com/Nutlope/twitterbio",
 14 |         permanent: false,
 15 |       },
 16 |       {
 17 |         source: "/deploy",
 18 |         destination: "https://vercel.com/templates/next.js/twitter-bio",
 19 |         permanent: false,
 20 |       },
 21 |     ];
 22 |   },
 23 |   images: {
 24 |     unoptimized: true,
 25 |   },
 26 |   experimental: {
 27 |     // layers: true,
 28 |   },
 29 |   transpilePackages: ['antd-mobile'],
 30 |   webpack(config, { isServer, dev }) {
 31 |     // Enable webassembly
 32 |     config.experiments = { ...config.experiments, asyncWebAssembly: true, layers: true };
 33 |     if (isServer) {
 34 |       config.output.webassemblyModuleFilename =
 35 |         '../static/wasm/[modulehash].wasm';
 36 |     } else {
 37 |       config.output.webassemblyModuleFilename =
 38 |         'static/wasm/[modulehash].wasm';
 39 |     }
 40 | 
 41 |     // Unfortunately there isn't an easy way to override the replacement function body, so we 
 42 |     // have to just replace the whole plugin `apply` body.
 43 |     function patchSsrPlugin(plugin) {
 44 |       plugin.apply = function apply(compiler) {
 45 |         compiler.hooks.compilation.tap("NextJsSSRImport", compilation => {
 46 |           compilation.mainTemplate.hooks.requireEnsure.tap(
 47 |             "NextJsSSRImport",
 48 |             (code, chunk) => {
 49 |               // This is the block that fixes https://github.com/vercel/next.js/issues/22581
 50 |               if (!chunk.name) {
 51 |                 return;
 52 |               }
 53 | 
 54 |               // Update to load chunks from our custom chunks directory
 55 |               const outputPath = resolve("/");
 56 |               const pagePath = join("/", dirname(chunk.name));
 57 |               const relativePathToBaseDir = relative(pagePath, outputPath);
 58 |               // Make sure even in windows, the path looks like in unix
 59 |               // Node.js require system will convert it accordingly
 60 |               const relativePathToBaseDirNormalized = relativePathToBaseDir.replace(
 61 |                 /\\/g,
 62 |                 "/"
 63 |               );
 64 |               return code
 65 |                 .replace(
 66 |                   'require("./"',
 67 |                   `require("${relativePathToBaseDirNormalized}/"`
 68 |                 )
 69 |                 .replace(
 70 |                   "readFile(join(__dirname",
 71 |                   `readFile(join(__dirname, "${relativePathToBaseDirNormalized}"`
 72 |                 );
 73 |             }
 74 |           );
 75 |         });
 76 |       };
 77 |     }
 78 | 
 79 |     // In prod mode and in the server bundle (the place where this "chunks" bug
 80 |     // appears), use the client static directory for the same .wasm bundle
 81 |     // config.output.webassemblyModuleFilename =
 82 |     //   isServer && !dev ? "../static/wasm/[id].wasm" : "static/wasm/[id].wasm";
 83 | 
 84 |     // Ensure the filename for the .wasm bundle is the same on both the client
 85 |     // and the server (as in any other mode the ID's won't match)
 86 |     // config.optimization.moduleIds = "named";
 87 |     config.resolve = {
 88 |       ...config.resolve,
 89 |       fallback: {
 90 |         async_hooks: false,
 91 |       },
 92 |     }
 93 | 
 94 |     if (!isServer) {
 95 |       config.resolve = {
 96 |         ...config.resolve,
 97 |         fallback: {
 98 |           ...config.resolve.fallback,
 99 |           // fixes proxy-agent dependencies
100 |           net: false,
101 |           stream: false,
102 |           dns: false,
103 |           tls: false,
104 |           assert: false,
105 |           // fixes next-i18next dependencies
106 |           path: false,
107 |           fs: false,
108 |           // fixes mapbox dependencies
109 |           events: false,
110 |           // fixes sentry dependencies
111 |           process: false
112 |         }
113 |       }
114 |     }
115 | 
116 |     return config;
117 |   },
118 | };
119 | 
120 | 
121 | module.exports = conf;
122 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@frontend-engineering/chatgpt-webapp-fullstack",
 3 |   "version": "2.0.0",
 4 |   "description": "A full-stack web application that incorporates ChatGPT technology. It features both a webpage and a Node.js server, with the added convenience of one-click deployment on Vercel.",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "next dev",
 8 |     "build": "next build",
 9 |     "start": "next start"
10 |   },
11 |   "homepage": "https://chatgpt-webapp-fullstack-b8td-8dzy0yt7z-webinfra.vercel.app/",
12 |   "dependencies": {
13 |     "@cashier/web": "^0.3.7",
14 |     "@dqbd/tiktoken": "^1.0.7",
15 |     "@fortaine/fetch-event-source": "^3.0.6",
16 |     "@headlessui/react": "^1.7.7",
17 |     "@headlessui/tailwindcss": "^0.1.2",
18 |     "@heroicons/react": "^2.0.13",
19 |     "@keyv/redis": "^2.5.7",
20 |     "@tailwindcss/forms": "^0.5.3",
21 |     "@vercel/analytics": "^0.1.8",
22 |     "@vercel/edge-config": "^0.1.9",
23 |     "@vercel/edge-primitives": "^0.12.4",
24 |     "@vercel/kv": "^0.1.1",
25 |     "antd-mobile": "^5.29.1",
26 |     "antd-mobile-icons": "^0.3.0",
27 |     "classnames": "^2.3.2",
28 |     "eventsource-parser": "^0.0.5",
29 |     "keyv": "^4.5.2",
30 |     "nanoid": "^4.0.2",
31 |     "next": "latest",
32 |     "react": "18.2.0",
33 |     "react-dom": "18.2.0",
34 |     "react-hook-form": "^7.42.0",
35 |     "react-hot-toast": "^2.4.0",
36 |     "react-markdown": "^8.0.7",
37 |     "react-syntax-highlighter": "^15.5.0",
38 |     "react-use-measure": "^2.1.1",
39 |     "sass": "^1.62.1",
40 |     "whatwg-fetch": "^3.6.2"
41 |   },
42 |   "devDependencies": {
43 |     "@types/node": "18.11.3",
44 |     "@types/react": "18.0.21",
45 |     "@types/react-dom": "18.0.6",
46 |     "autoprefixer": "^10.4.12",
47 |     "postcss": "^8.4.18",
48 |     "tailwindcss": "^3.2.4",
49 |     "typescript": "4.9.4"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { Analytics } from "@vercel/analytics/react";
 2 | import type { AppProps } from "next/app";
 3 | import Script from 'next/script'
 4 | import { useRouter } from 'next/router'
 5 | import "../styles/globals.css";
 6 | 
 7 | 
 8 | function MyApp({ Component, pageProps }: AppProps) {
 9 |   const router = useRouter()
10 |   return (
11 |     <>
12 |       <Script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3614870144525266" crossOrigin="anonymous"></Script>
13 |       <Script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"
14 |         strategy="lazyOnload"
15 |         onLoad={() => {
16 |           if (typeof window !== 'undefined') {
17 |             console.log('Script has loaded', router.asPath)
18 |             setTimeout(() => {
19 |               if (router.asPath.indexOf('showLog=magicfwx') > -1) {
20 |                 new (window as any).VConsole();
21 |               }
22 |             }, 300)
23 |           }
24 |         }}
25 |       />
26 |       <Component {...pageProps} />
27 |       <Analytics />
28 |     </>
29 |   );
30 | }
31 | 
32 | export default MyApp;
33 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Html, Main, NextScript } from "next/document";
 2 | 
 3 | class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <Html lang="en">
 7 |         <Head>
 8 |           <link rel="icon" href="/favicon.ico" />
 9 |           <meta
10 |             name="description"
11 |             content="Discover the ultimate solution to streamline your work process! Our AI-powered chat app allows you to easily query data online, saving you time and effort. With our user-friendly interface, you can efficiently manage your workload and increase productivity. Say goodbye to manual data entry and hello to smarter, faster results with our cutting-edge technology. Try it now and experience the power of AI chat!"
12 |           />
13 |           <meta property="og:site_name" content="webinfra.cloud" />
14 |           <meta
15 |             property="og:description"
16 |             content="Discover the ultimate solution to streamline your work process! Our AI-powered chat app allows you to easily query data online, saving you time and effort. With our user-friendly interface, you can efficiently manage your workload and increase productivity. Say goodbye to manual data entry and hello to smarter, faster results with our cutting-edge technology. Try it now and experience the power of AI chat!"
17 |           />
18 |           <meta property="og:title" content="Boost Your Work Efficiency with the Power of AI" />
19 |           <meta name="twitter:title" content="Boost Your Work Efficiency with the Power of AI" />
20 |           <meta
21 |             name="twitter:description"
22 |             content="Discover the ultimate solution to streamline your work process! Our AI-powered chat app allows you to easily query data online, saving you time and effort. With our user-friendly interface, you can efficiently manage your workload and increase productivity. Say goodbye to manual data entry and hello to smarter, faster results with our cutting-edge technology. Try it now and experience the power of AI chat!"
23 |           />
24 |         </Head>
25 |         <body>
26 |           <Main />
27 |           <NextScript />
28 |         </body>
29 |       </Html>
30 |     );
31 |   }
32 | }
33 | 
34 | export default MyDocument;
35 | 


--------------------------------------------------------------------------------
/pages/account.js:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useMemo, useState } from 'react';
  2 | import { NavBar, List, Avatar, Toast } from 'antd-mobile';
  3 | import Cashier from '@cashier/web';
  4 | import { useRouter } from 'next/router';
  5 | import { appId, appToken, enableAuth } from '../components/Config.js';
  6 | import './account.module.css';
  7 | 
  8 | const Account = () => {
  9 |     const router = useRouter();
 10 |     const [loginState, setLoginState] = useState(null)
 11 |     const sdkInsta = useMemo(() => {
 12 |         if (!enableAuth) {
 13 |             console.log('skip auth');
 14 |             return null;
 15 |         }
 16 |         return new Cashier({
 17 |             // 应用 ID
 18 |             appId,
 19 |             appToken,
 20 |             // domain: 'https://test-sdk-api.my.webinfra.cloud'
 21 |             // domain: 'http://localhost:3333',
 22 |             pageDomain: 'https://pay.freecharger.cn',
 23 |             mobile: true,
 24 |             inPage: true,
 25 |             root: '#sdk-root'
 26 |         });
 27 |     }, []);
 28 | 
 29 |     /**
 30 |      * 获取用户的登录状态
 31 |      */
 32 |     const getLoginState = useCallback(async () => {
 33 |         if (!sdkInsta) return;
 34 |         try {
 35 |             console.log('get login state...');
 36 |             let state = await sdkInsta.getUserInfo();
 37 |             console.log('get loginState resp: ', state)
 38 |             if (!state) {
 39 |                 state = await sdkInsta.login()
 40 |             }
 41 |             setLoginState(state);
 42 |         } catch (error) {
 43 |             console.error('login state: ', error);
 44 |             Toast.show({
 45 |                 content: `初始化失败 - ${error?.message}`
 46 |             })
 47 |         }
 48 |     }, [sdkInsta]);
 49 | 
 50 |     const goPurchase = useCallback(async () => {
 51 |         if (!enableAuth) {
 52 |             console.log('skip auth');
 53 |             Toast.show({
 54 |                 content: '用户功能模块已禁用',
 55 |             })
 56 |             return null;
 57 |         }
 58 |         if (!sdkInsta) return;
 59 |         const resp = await sdkInsta.purchase({})
 60 |         console.log('purchase resp: ', resp);
 61 |         getLoginState();
 62 |     }, [sdkInsta]);
 63 | 
 64 |     const back = () => {
 65 |         router.push('/');
 66 |     }
 67 | 
 68 |     const handleHelpClick = (e) => {
 69 |         e.preventDefault();
 70 |         Toast.show({
 71 |             content: '微信公众号 (webinfra) 中，发送消息联系客服',
 72 |         })
 73 |     }
 74 | 
 75 |     const clearUserAuth = (e) => {
 76 |         e.preventDefault();
 77 |         sdkInsta.logout().then(() => {
 78 |             Toast.show({ content: '清除登录信息' })
 79 |             window?.location?.reload();
 80 |         })
 81 |     }
 82 | 
 83 |     const fetchUserAuth = (e) => {
 84 |         e.preventDefault();
 85 |         if (!enableAuth) {
 86 |             console.log('skip auth');
 87 |             Toast.show({
 88 |                 content: '用户功能模块已禁用',
 89 |             })
 90 |             return null;
 91 |         }
 92 |         getLoginState()
 93 |         return;
 94 |     }
 95 | 
 96 |     useEffect(() => {
 97 |         if (sdkInsta) {
 98 |             sdkInsta.init()
 99 |                 .then(() => {
100 |                     return getLoginState()
101 |                 })
102 |         }
103 |     }, [sdkInsta, getLoginState])
104 | 
105 |     return <div className='account-container'>
106 |         <NavBar onBack={back}>账户中心</NavBar>
107 |         <div id='sdk-root'></div>
108 |         <List header='用户信息' mode='card'>
109 |             <List.Item
110 |                 prefix={<Avatar src={loginState?.avatar || loginState?.weixinProfile?.headimgurl} />}
111 |                 description={loginState?.profile?.amount > 0 ? (loginState?.profile?.expireAt ? '额度有效期至 ' + new Date(loginState?.profile.expireAt).toLocaleDateString() : '') : '免费额度用完为止，不会自动刷新'}
112 |             >
113 |                 {loginState ? (loginState.weixinProfile?.nickname || loginState?.name || loginState?.email || loginState?.id).slice(0, 13) : '未登录'}
114 |             </List.Item>
115 |             <List.Item extra={loginState?.profile?.expireAt ? (new Date(loginState?.profile?.expireAt).valueOf() > Date.now() ? (loginState?.profile?.amount > 0 ? loginState?.profile?.amount : 0) : '-') : (loginState?.profile?.amount > 0 ? loginState?.profile?.amount : 0)}>
116 |                 当前额度
117 |             </List.Item>
118 |             <List.Item onClick={goPurchase}>
119 |                 额度充值
120 |             </List.Item>
121 |             <List.Item onClick={handleHelpClick}>联系客服</List.Item>
122 |             <List.Item onClick={loginState ? clearUserAuth : fetchUserAuth}>
123 |                 {(!loginState ? '点击登录' : "退出登录")}
124 |             </List.Item>
125 |         </List>
126 |     </div>
127 | }
128 | 
129 | export default Account;


--------------------------------------------------------------------------------
/pages/account.module.css:
--------------------------------------------------------------------------------
1 | .account-container {
2 |     text-align: left;
3 | }
4 | 


--------------------------------------------------------------------------------
/pages/api/chat.ts:
--------------------------------------------------------------------------------
 1 | import { getContext, getClient, filterClientOptions, checkLimit, userAmountFeedback } from '../../utils/ChatServiceBridge';
 2 | 
 3 | // if (!process.env.OPENAI_API_KEY) {
 4 | //   throw new Error("Missing env var from OpenAI");
 5 | // }
 6 | 
 7 | export const config = {
 8 |   runtime: "edge",
 9 | };
10 | 
11 | const handler = async (req: Request): Promise<Response> => {
12 |   console.log('edge function got: ', req);
13 | 
14 |   const body = ((await req.json()) || {})
15 | 
16 |   if (!body.message) {
17 |     return new Response("No prompt in the request", { status: 400 });
18 |   }
19 |   const { uid, at } = body;
20 |   let isCharged = false; // 是否消耗付费额度
21 |   try {
22 |       const enableAuth = process.env.NEXT_PUBLIC_ENABLE_AUTH;
23 |       console.log('enable auth: ', enableAuth);
24 |       if (enableAuth === 'WebInfra') {
25 |           if (!uid) {
26 |               throw new Error('no uid found');
27 |           }
28 |           const result = await checkLimit({
29 |               uid,
30 |               token: at,
31 |           })
32 |             .catch((err) => {
33 |               console.log('check limit exception: ', err);
34 |               throw err;
35 |             });
36 |           console.log('apply result: ', JSON.stringify(result));
37 | 
38 |           if (!result.success) {
39 |               throw new Error('Auth Failed' + result?.message)
40 |           }
41 |           isCharged = result.data?.charged;
42 |           console.log('Auth passed: ', isCharged);
43 |       } else {
44 |           console.log('Skip auth....');
45 |       }
46 |   } catch (error: any) {
47 |       const obj = {
48 |         success: false,
49 |         message: error?.message || '数据库查询失败',
50 |         code: error?.code || 500,
51 |       };
52 |       const blob = new Blob([JSON.stringify(obj, null, 2)], {
53 |         type: "application/json",
54 |       });
55 |       return new Response(blob, { status: 401, statusText: "Unauthorized" });
56 |   }
57 | 
58 |   let client;
59 |   const clientOptions = await filterClientOptions(body.clientOptions);
60 |   if (clientOptions && clientOptions.clientToUse) {
61 |       client = clientOptions.clientToUse;
62 |       delete clientOptions.clientToUse;
63 |   }
64 | 
65 |   const targetClient = await getClient(client);
66 |   const stream = await targetClient.sendMessage(body.message, {
67 |       jailbreakConversationId: body.jailbreakConversationId ? body.jailbreakConversationId.toString() : undefined,
68 |       conversationId: body.conversationId ? body.conversationId.toString() : undefined,
69 |       parentMessageId: body.parentMessageId ? body.parentMessageId.toString() : undefined,
70 |       conversationSignature: body.conversationSignature,
71 |       clientId: body.clientId,
72 |       invocationId: body.invocationId,
73 |       clientOptions,
74 |       // onProgress,
75 |       onEnd: () => {
76 |         // only update user account after request success
77 |         userAmountFeedback({
78 |           uid,
79 |           token: at,
80 |           charged: isCharged,
81 |         }).then((amountUpdated) => {
82 |             console.log('amount update result: ', JSON.stringify(amountUpdated));
83 |         }).catch(err => {
84 |           console.error('amount update failed: ', err);
85 |         })
86 |       },
87 |       // abortController,
88 |   });
89 | 
90 |   // const stream = await OpenAIStream(payload);
91 |   return new Response(stream);
92 | };
93 | 
94 | export default handler;
95 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { NextPage } from "next";
 2 | import Head from "next/head";
 3 | import Image from "next/image";
 4 | import { useRef, useState } from "react";
 5 | import { Toaster, toast } from "react-hot-toast";
 6 | import DropDown, { VibeType } from "../components/DropDown";
 7 | import Footer from "../components/Footer";
 8 | import Github from "../components/GitHub";
 9 | import Header from "../components/Header";
10 | import Chat from '../components/Chat';
11 | import LoadingDots from "../components/LoadingDots";
12 | 
13 | const Home: NextPage = () => {
14 |   return (
15 |     <div className="page-container">
16 |       <Head>
17 |         <title>Boost Your Work Efficiency with the Power of AI</title>
18 |         <link rel="icon" href="/favicon.ico" />
19 |       </Head>
20 |       {/* <Header /> */}
21 |       <Chat />
22 |       {/* <Footer /> */}
23 |     </div>
24 |   );
25 | };
26 | 
27 | export default Home;
28 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/1-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/1-black.png


--------------------------------------------------------------------------------
/public/2-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/2-black.png


--------------------------------------------------------------------------------
/public/analytics.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/analytics.png


--------------------------------------------------------------------------------
/public/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/app.png


--------------------------------------------------------------------------------
/public/assets/group-qr-8-13.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/assets/group-qr-8-13.jpeg


--------------------------------------------------------------------------------
/public/assets/qr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/assets/qr.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/favicon.ico


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "ChatGPT",
 3 |   "name": "ChatGPT service",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 | 
11 |   ],
12 |   "start_url": ".",
13 |   "display": "standalone",
14 |   "theme_color": "#000000",
15 |   "background_color": "#ffffff"
16 | }
17 | 


--------------------------------------------------------------------------------
/public/notice.json:
--------------------------------------------------------------------------------
1 | {"contents": "因多条线路被封，可能消息响应速度较慢，请耐心等待，答案总会来的～"}


--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/og-image.png


--------------------------------------------------------------------------------
/public/qr-prom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/qr-prom.png


--------------------------------------------------------------------------------
/public/qr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/qr.jpg


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/screenshot.png


--------------------------------------------------------------------------------
/public/share.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/share.jpg


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/public/vercelLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/vercelLogo.png


--------------------------------------------------------------------------------
/public/writingIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-engineering/chatgpt-webapp-fullstack/b43cdad8ec6e5a0466b4d63c6eab6e819bc13dbd/public/writingIcon.png


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .page-container {
 6 |     margin: 0;
 7 |     padding: 0;
 8 | }
 9 | 
10 | .adm-list-item {
11 |     overflow: hidden;
12 | }
13 | 
14 | .adm-list-item-content-main {
15 |     width: 100%;
16 | }
17 | 
18 | #sdk-root {
19 |     position: fixed;
20 |     display: block;
21 |     box-sizing: border-box;
22 |     width: 100vw;
23 |     height: fit-content;
24 |     top: 0;
25 |     left: 0;
26 |     margin: 0;
27 |     padding: 0;
28 |     z-index: 999;
29 | }


--------------------------------------------------------------------------------
/styles/loading-dots.module.css:
--------------------------------------------------------------------------------
 1 | .loading {
 2 |   display: inline-flex;
 3 |   align-items: center;
 4 | }
 5 | 
 6 | .loading .spacer {
 7 |   margin-right: 2px;
 8 | }
 9 | 
10 | .loading span {
11 |   animation-name: blink;
12 |   animation-duration: 1.4s;
13 |   animation-iteration-count: infinite;
14 |   animation-fill-mode: both;
15 |   width: 5px;
16 |   height: 5px;
17 |   border-radius: 50%;
18 |   display: inline-block;
19 |   margin: 0 1px;
20 | }
21 | 
22 | .loading span:nth-of-type(2) {
23 |   animation-delay: 0.2s;
24 | }
25 | 
26 | .loading span:nth-of-type(3) {
27 |   animation-delay: 0.4s;
28 | }
29 | 
30 | .loading2 {
31 |   display: inline-flex;
32 |   align-items: center;
33 | }
34 | 
35 | .loading2 .spacer {
36 |   margin-right: 2px;
37 | }
38 | 
39 | .loading2 span {
40 |   animation-name: blink;
41 |   animation-duration: 1.4s;
42 |   animation-iteration-count: infinite;
43 |   animation-fill-mode: both;
44 |   width: 4px;
45 |   height: 4px;
46 |   border-radius: 50%;
47 |   display: inline-block;
48 |   margin: 0 1px;
49 | }
50 | 
51 | .loading2 span:nth-of-type(2) {
52 |   animation-delay: 0.2s;
53 | }
54 | 
55 | .loading2 span:nth-of-type(3) {
56 |   animation-delay: 0.4s;
57 | }
58 | 
59 | @keyframes blink {
60 |   0% {
61 |     opacity: 0.2;
62 |   }
63 |   20% {
64 |     opacity: 1;
65 |   }
66 |   100% {
67 |     opacity: 0.2;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   future: {
 4 |     hoverOnlyWhenSupported: true,
 5 |   },
 6 |   content: [
 7 |     "./pages/**/*.{js,ts,jsx,tsx}",
 8 |     "./components/**/*.{js,ts,jsx,tsx}",
 9 |     "./app/**/*.{js,ts,jsx,tsx}",
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [require("@tailwindcss/forms"), require("@headlessui/tailwindcss")],
15 | };
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/Chat.js", "components/Messages.js"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/utils/ChatServiceBridge.js:
--------------------------------------------------------------------------------
  1 | // Run the server first with `npm run server`
  2 | import { getAll } from '@vercel/edge-config';
  3 | import ObjCache from './ObjCacheWrap';
  4 | // import Keyv from './KeyvConnector';
  5 | import ChatGPTClient from './client/ChatGPTClient'
  6 | // import { HOST_URL } from './config'
  7 | export const HOST_URL = 'http://localhost:3000';
  8 | let settings;
  9 | 
 10 | // =====================
 11 | // Server side functions
 12 | // =====================
 13 | export const getContext = async () => {
 14 |     if (settings) {
 15 |         return settings;
 16 |     }
 17 |     const config = await getAll();
 18 |     console.log('---get config---', config);
 19 | 
 20 |     if (!config) {
 21 |         console.error('Error: need setup vercel config first');
 22 |         throw new Error('config not found')
 23 |     }
 24 | 
 25 |     const clientToUse = config.apiOptions?.clientToUse || settings.clientToUse || 'chatgpt';
 26 |     // console.log('create keyv from url: ', process.env.ChatKV_URL);
 27 |     // if (!process.env.ChatKV_URL) {
 28 |     //     throw new Error('redis kv is not setup');
 29 |     // }
 30 |     // config.cacheOptions.store = new Keyv(process.env.ChatKV_URL)
 31 |     // console.log('debug----', Keyv);
 32 | 
 33 |     const conversationsCache = new ObjCache();
 34 | 
 35 |     const perMessageClientOptionsWhitelist = config.apiOptions?.perMessageClientOptionsWhitelist || null;
 36 |     settings = {
 37 |         ...config,
 38 |         clientToUse,
 39 |         conversationsCache,
 40 |         perMessageClientOptionsWhitelist,
 41 |     }
 42 | 
 43 |     return {
 44 |         ...config,
 45 |         clientToUse,
 46 |         conversationsCache,
 47 |         perMessageClientOptionsWhitelist,
 48 |     }
 49 | }
 50 | 
 51 | export async function getClient(clientToUse) {
 52 |     await getContext();
 53 | 
 54 |     let clientToUseForMessage = clientToUse || settings.clientToUse;
 55 | 
 56 |     switch (clientToUseForMessage) {
 57 |         // case 'bing':
 58 |         //     return new BingAIClient(settings.bingAiClient);
 59 |         // case 'chatgpt-browser':
 60 |         //     return new ChatGPTBrowserClient(
 61 |         //         settings.chatGptBrowserClient,
 62 |         //         settings.cacheOptions,
 63 |         //     );
 64 |         case 'chatgpt':
 65 |             settings.cacheOptions.namespace = settings.cacheOptions.namespace || 'chatgpt';
 66 |             // eslint-disable-next-line no-case-declarations
 67 |             let configApiKey = settings.openaiApiKey || settings.chatGptClient.openaiApiKey;
 68 |             if (!configApiKey) {
 69 |                 throw new Error('Api Key not config');
 70 |             }
 71 |             if (configApiKey?.indexOf(',') > -1) {
 72 |                 const keys = configApiKey.split(',');
 73 |                 configApiKey = keys[Math.floor(Math.random() * keys.length)];
 74 |             }
 75 |             return new ChatGPTClient(
 76 |                 configApiKey,
 77 |                 settings.conversationsCache,
 78 |                 settings.chatGptClient,
 79 |                 settings.cacheOptions,
 80 |             );
 81 |         default:
 82 |             throw new Error(`Invalid clientToUse: ${clientToUseForMessage}`);
 83 |     }
 84 | }
 85 | 
 86 | /**
 87 |  * Filter objects to only include whitelisted properties set in
 88 |  * `settings.js` > `apiOptions.perMessageClientOptionsWhitelist`.
 89 |  * Returns original object if no whitelist is set.
 90 |  * @param {*} inputOptions
 91 |  */
 92 | export async function filterClientOptions(inputOptions) {
 93 |     const { perMessageClientOptionsWhitelist, clientToUseForMessage } = await getContext();
 94 |     if (!inputOptions || !perMessageClientOptionsWhitelist) {
 95 |         return null;
 96 |     }
 97 | 
 98 |     // If inputOptions.clientToUse is set and is in the whitelist, use it instead of the default
 99 |     if (
100 |         perMessageClientOptionsWhitelist.validClientsToUse
101 |         && inputOptions.clientToUse
102 |         && perMessageClientOptionsWhitelist.validClientsToUse.includes(inputOptions.clientToUse)
103 |     ) {
104 |         settings.clientToUseForMessage = inputOptions.clientToUse;
105 |     } else {
106 |         inputOptions.clientToUse = clientToUseForMessage;
107 |     }
108 | 
109 |     const whitelist = perMessageClientOptionsWhitelist[clientToUseForMessage];
110 |     if (!whitelist) {
111 |         // No whitelist, return all options
112 |         return inputOptions;
113 |     }
114 | 
115 |     const outputOptions = {};
116 | 
117 |     for (const property of Object.keys(inputOptions)) {
118 |         const allowed = whitelist.includes(property);
119 | 
120 |         if (!allowed && typeof inputOptions[property] === 'object') {
121 |             // Check for nested properties
122 |             for (const nestedProp of Object.keys(inputOptions[property])) {
123 |                 const nestedAllowed = whitelist.includes(`${property}.${nestedProp}`);
124 |                 if (nestedAllowed) {
125 |                     outputOptions[property] = outputOptions[property] || {};
126 |                     outputOptions[property][nestedProp] = inputOptions[property][nestedProp];
127 |                 }
128 |             }
129 |             continue;
130 |         }
131 | 
132 |         // Copy allowed properties to outputOptions
133 |         if (allowed) {
134 |             outputOptions[property] = inputOptions[property];
135 |         }
136 |     }
137 | 
138 |     return outputOptions;
139 | }
140 | 
141 | const DomainHost = 'https://prod-sdk-api.my.webinfra.cloud';
142 | const cacheKeyPerDayTTL = 3600 * 24;
143 | 
144 | const getCustomerInfo = async (userToken) => {
145 |     const { webinfraConfig } = await getContext();
146 |     const sdkHost = `${webinfraConfig?.host || DomainHost}/api/sdk/customer`;
147 |     return fetch(sdkHost, {
148 |         method: 'GET',
149 |         headers: {
150 |             'Content-Type': 'application/json',
151 |             Authorization: `Bearer ${userToken}`,
152 |         },
153 |     })
154 |         .then(resp => resp.json());
155 | };
156 | 
157 | const increCntLocal = async (uid) => {
158 |     const cacheKey = `cnt-${uid}`;
159 |     const dateStr = new Date().toDateString().replace(/\s/igm, '-');
160 |     const { conversationsCache } = await getContext();
161 |     const cacheData = await conversationsCache.get(cacheKey);
162 |     if (!cacheData) {
163 |         console.log('create local user cnt: ', cacheKey)
164 |         return conversationsCache.set(cacheKey, {
165 |             date: dateStr,
166 |             cnt: 1,
167 |         });
168 |     }
169 |     console.log('incre local user cnt: ', cacheKey, cacheData.cnt)
170 |     return conversationsCache.set(cacheKey, {
171 |         date: dateStr,
172 |         cnt: (cacheData.cnt || 0) + 1,
173 |     }, {
174 |         ex: cacheKeyPerDayTTL
175 |     });
176 | };
177 | 
178 | const getFreeCnt = (freeCnt) => {
179 |     let freeCntNum = freeCnt ? Number(freeCnt) : 20;
180 |     if (!(freeCntNum > 0)) {
181 |         // 非法配置
182 |         console.error('FREE_CNT_PER_DAY 无效配置，重置为20');
183 |         freeCntNum = 20;
184 |     }
185 |     return freeCntNum;
186 | };
187 | 
188 | export const checkLimit = async ({
189 |     uid,
190 |     token,
191 | }) => {
192 |     console.log('checking limit', uid, token);
193 |     const userInfo = await getCustomerInfo(token);
194 |     console.log('resp - ', userInfo);
195 | 
196 |     if (userInfo?.success) {
197 |         const profile = userInfo.data?.profile;
198 |         // 强制用户订阅，免费版或者付费版二选一
199 |         if (!profile) {
200 |             throw new Error('用户未订阅');
201 |         }
202 |         //  有付费额度
203 |         if ((profile?.amount > 0) && (new Date(profile.expireAt).valueOf() > Date.now())) {
204 |             return {
205 |                 success: true,
206 |                 data: {
207 |                     charged: true, // 付费额度
208 |                     cnt: profile.amount,
209 |                 },
210 |             };
211 |         } else {
212 |             console.log(' no valid amount ');
213 |         }
214 |         // 计算免费额度
215 |         const curDateStr = new Date().toDateString().replace(/\s/igm, '-');
216 |         const cacheKey = `cnt-${uid}`;
217 |         const { conversationsCache, freeCntPerDay } = await getContext()
218 |         const freeCnt = getFreeCnt(freeCntPerDay);
219 | 
220 |         const cntData = await conversationsCache.get(cacheKey);
221 |         if (!cntData || (cntData.date !== curDateStr)) {
222 |             console.log('cache miss: ', cntData?.date, cacheKey);
223 |             await conversationsCache.set(cacheKey, {
224 |                 date: curDateStr,
225 |                 cnt: 0,
226 |             }, {
227 |                 ex: cacheKeyPerDayTTL, // 1 day
228 |             });
229 |             return {
230 |                 success: true,
231 |                 data: {
232 |                     date: curDateStr,
233 |                     charged: false, // 免费额度
234 |                     cnt: freeCnt,
235 |                 },
236 |             };
237 |         }
238 |         const { date, cnt } = cntData;
239 |         console.log('cache hit: ', date, cnt);
240 |         if (cnt >= freeCnt) {
241 |             // 超出免费额度，需要付费
242 |             return {
243 |                 success: false,
244 |                 message: 'Request Limited',
245 |                 data: {
246 |                     date,
247 |                     charged: false, // 免费额度
248 |                     cnt: 0,
249 |                 },
250 |             };
251 |         }
252 |         // 免费额度可用
253 |         return {
254 |             success: true,
255 |             data: {
256 |                 date,
257 |                 charged: false, // 免费额度
258 |                 cnt: freeCnt - cnt,
259 |             },
260 |         };
261 |     }
262 |     return {
263 |         success: false,
264 |         data: userInfo?.data,
265 |         message: userInfo?.message || '获取用户信息失败',
266 |         code: userInfo?.errorCode,
267 |     };
268 | };
269 | 
270 | export const userAmountFeedback = async (option) => {
271 |     const {
272 |         uid,
273 |         token,
274 |         charged,
275 |     } = option || {};
276 |     if (charged) {
277 |         console.log('user profile amount update - ', uid);
278 |         // 付费额度更新
279 |         const { webinfraConfig } = await getContext();
280 |         const sdkHost = `${webinfraConfig?.host || DomainHost}/api/sdk/customer/amount`;
281 |         return fetch(sdkHost, {
282 |             method: 'POST',
283 |             headers: {
284 |                 'Content-Type': 'application/json',
285 |                 Authorization: `Bearer ${token}`,
286 |             },
287 |             body: JSON.stringify({
288 |                 uid,
289 |                 action: 'decrement',
290 |                 count: 1,
291 |             }),
292 |         }).then(resp => resp.json());
293 |     }
294 |     // 更新免费额度
295 |     console.log('user free amount update - ', uid);
296 |     return increCntLocal(uid);
297 | };
298 | 
299 | 
300 | // =====================
301 | // Client side functions
302 | // =====================
303 | export const callBridge = async (options) => {
304 |     const { data, onmessage, onopen, onclose, onerror, getSignal } = options || {}
305 |     if (!data?.message) {
306 |         throw new Error('Empty Input Message');
307 |     }
308 |     let clientOptions = {};
309 |     if (data.prompt) {
310 |         clientOptions.promptPrefix = data.prompt;
311 |         delete data.prompt;
312 |     }
313 |     const opts = {
314 |         method: 'POST',
315 |         headers: {
316 |             'Content-Type': 'application/json',
317 |         },
318 |         body: JSON.stringify({
319 |             ...(data || {}),
320 |             // Set stream to true to receive each token as it is generated.
321 |             stream: true,
322 |             clientOptions,
323 |         }),
324 |     };
325 | 
326 |     console.log('start call brdige...', new Date());
327 |     let openedConnection = false;
328 |     try {
329 |         let reply = '';
330 |         let msgId = '';
331 |         let conversationId = '';
332 |         const controller = new AbortController();
333 |         let aborted = false;
334 |         if (getSignal) {
335 |             getSignal(controller);
336 |         }
337 | 
338 |         const response = await fetch(`/api/chat`, {
339 |             ...opts,
340 |             signal: controller.signal,
341 |         });
342 | 
343 | 
344 |         if (!response.ok) {
345 |             throw new Error(response.statusText);
346 |         }
347 | 
348 |         // This data is a ReadableStream
349 |         const data = response.body;
350 |         if (!data) {
351 |             return;
352 |         }
353 | 
354 |         const reader = data.getReader();
355 |         const decoder = new TextDecoder();
356 |         let done = false;
357 | 
358 |         await onopen()
359 |         openedConnection = true;
360 |         let reportStr = '';
361 |         let lastChunk = '';
362 |         while (!done) {
363 |             const { value, done: doneReading } = await reader.read();
364 |             done = doneReading;
365 |             const chunkValue = decoder.decode(value);
366 |             console.log('read chunk: ', chunkValue);
367 |             if (chunkValue) {
368 |                 if (reportStr) {
369 |                     reportStr += chunkValue;
370 |                 } else {
371 |                     const concatStr = `${lastChunk.trim()}${chunkValue.trim()}`;
372 |                     const tokenIdx = concatStr.indexOf('[__REPORT__]');
373 |                     if (tokenIdx > -1) {
374 |                         console.log('token detected: ', tokenIdx, concatStr, tokenIdx - lastChunk.length);
375 |                         reportStr = concatStr.slice(tokenIdx + 12) || ' ';
376 |                         // 临界情况
377 |                         if (lastChunk.length > tokenIdx) {
378 |                             reply = reply.slice(0, tokenIdx - lastChunk.length)
379 |                         }
380 |                     }  else {
381 |                         onmessage(chunkValue);
382 |                         reply += chunkValue
383 |                         lastChunk = chunkValue;
384 |                     }
385 |                 }
386 |                 // TODO: Error event handler
387 |             }
388 |         }
389 |         console.log('final reply: ', reply);
390 |         console.log('final reportStr: ', reportStr);
391 | 
392 |         // 连接意外中断，没有收到report数据
393 |         if (!reportStr) {
394 |             console.error('no reply meta data found')
395 |             throw new Error('No reply meta data')
396 |         }
397 |         const resp = JSON.parse(reportStr);
398 |         console.log('report: ', resp)
399 |         msgId = resp.id;
400 |         conversationId = resp.conversationId;
401 |         const finalResp = resp.message;
402 |         if (finalResp?.length > reply?.length) {
403 |             console.log('use returned full response: ', finalResp);
404 |             reply = finalResp;
405 |         }
406 |         const resultObj = {
407 |             response: reply,
408 |             messageId: msgId,
409 |             conversationId: conversationId,
410 |         };
411 |         // Done: Result accept
412 |         return resultObj;
413 |     } catch (err) {
414 |         console.error('ERROR ', err);
415 |         if (openedConnection) {
416 |             console.log('connection close event');
417 |             onclose()
418 |         } else {
419 |             console.log('connection error event');
420 |             onerror(err)
421 |         }
422 |     }
423 | }
424 | 


--------------------------------------------------------------------------------
/utils/ObjCacheWrap.js:
--------------------------------------------------------------------------------
 1 | import kv from "@vercel/kv";
 2 | 
 3 | const EXPIRE_TIME = 3600 * 24 * 7
 4 | 
 5 | class ObjCacheWrap {
 6 |     async get(key) {
 7 |         if (!key) {
 8 |             throw new Error('Get key is lost')
 9 |         }
10 |         return kv.hgetall(key);
11 |     }
12 |     async set(key, value, opt) {
13 |         if (!key) {
14 |             throw new Error('Set key is lost')
15 |         }
16 |         if (typeof value !== 'object') {
17 |             throw new Error('Set value must be an object type');
18 |         }
19 |         return kv.hset(key, value, opt || { ex: EXPIRE_TIME })
20 |     }
21 | }
22 | 
23 | export default ObjCacheWrap;


--------------------------------------------------------------------------------
/utils/OpenAIStream.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createParser,
 3 |   ParsedEvent,
 4 |   ReconnectInterval,
 5 | } from "eventsource-parser";
 6 | 
 7 | export type ChatGPTAgent = "user" | "system";
 8 | 
 9 | export interface ChatGPTMessage {
10 |   role: ChatGPTAgent;
11 |   content: string;
12 | }
13 | 
14 | export interface OpenAIStreamPayload {
15 |   model: string;
16 |   messages: ChatGPTMessage[];
17 |   temperature: number;
18 |   top_p: number;
19 |   frequency_penalty: number;
20 |   presence_penalty: number;
21 |   max_tokens: number;
22 |   stream: boolean;
23 |   n: number;
24 | }
25 | 
26 | export async function OpenAIStream(payload: OpenAIStreamPayload) {
27 |   const encoder = new TextEncoder();
28 |   const decoder = new TextDecoder();
29 | 
30 |   let counter = 0;
31 | 
32 |   const res = await fetch("https://api.openai.com/v1/chat/completions", {
33 |     headers: {
34 |       "Content-Type": "application/json",
35 |       Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
36 |     },
37 |     method: "POST",
38 |     body: JSON.stringify(payload),
39 |   });
40 | 
41 |   const stream = new ReadableStream({
42 |     async start(controller) {
43 |       // callback
44 |       function onParse(event: ParsedEvent | ReconnectInterval) {
45 |         if (event.type === "event") {
46 |           const data = event.data;
47 |           // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
48 |           if (data === "[DONE]") {
49 |             controller.close();
50 |             return;
51 |           }
52 |           try {
53 |             const json = JSON.parse(data);
54 |             const text = json.choices[0].delta?.content || "";
55 |             if (counter < 2 && (text.match(/\n/) || []).length) {
56 |               // this is a prefix character (i.e., "\n\n"), do nothing
57 |               return;
58 |             }
59 |             const queue = encoder.encode(text);
60 |             controller.enqueue(queue);
61 |             counter++;
62 |           } catch (e) {
63 |             // maybe parse error
64 |             controller.error(e);
65 |           }
66 |         }
67 |       }
68 | 
69 |       // stream response (SSE) from OpenAI may be fragmented into multiple chunks
70 |       // this ensures we properly read chunks and invoke an event for each SSE event stream
71 |       const parser = createParser(onParse);
72 |       // https://web.dev/streams/#asynchronous-iteration
73 |       for await (const chunk of res.body as any) {
74 |         parser.feed(decoder.decode(chunk));
75 |       }
76 |     },
77 |   });
78 | 
79 |   return stream;
80 | }
81 | 


--------------------------------------------------------------------------------
/utils/Others.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useState } from 'react'
 3 | // Hook
 4 | export function useLocalStorage(key, initialValue) {
 5 |   // State to store our value
 6 |   // Pass initial state function to useState so logic is only executed once
 7 |   const [storedValue, setStoredValue] = useState(() => {
 8 |     if (typeof window === "undefined") {
 9 |       return initialValue;
10 |     }
11 |     try {
12 |       // Get from local storage by key
13 |       const item = window.localStorage.getItem(key);
14 |       // Parse stored json or if none return initialValue
15 |       return item ? JSON.parse(item) : initialValue;
16 |     } catch (error) {
17 |       // If error also return initialValue
18 |       console.log(error);
19 |       return initialValue;
20 |     }
21 |   });
22 |   // Return a wrapped version of useState's setter function that ...
23 |   // ... persists the new value to localStorage.
24 |   const setValue = (value) => {
25 |     try {
26 |       // Allow value to be a function so we have same API as useState
27 |       const valueToStore =
28 |         value instanceof Function ? value(storedValue) : value;
29 |       // Save state
30 |       setStoredValue(valueToStore);
31 |       // Save to local storage
32 |       if (typeof window !== "undefined") {
33 |         window.localStorage.setItem(key, JSON.stringify(valueToStore));
34 |       }
35 |     } catch (error) {
36 |       // A more advanced implementation would handle the error case
37 |       console.log(error);
38 |     }
39 |   };
40 |   return [storedValue, setValue];
41 | }
42 | 
43 | export const findValFromQuery = (search, key) => {
44 |   if (!search) {
45 |     return
46 |   }
47 |   const target = search.replace(/^\?/, '').split('&').find(item => item.startsWith(`${key}=`))
48 |   if (!target) {
49 |     return
50 |   }
51 |   return target.split('=')[1];
52 | }


--------------------------------------------------------------------------------
/utils/Settings.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     // Options for the Keyv cache, see https://www.npmjs.com/package/keyv.
 3 |     // This is used for storing conversations, and supports additional drivers (conversations are stored in memory by default).
 4 |     // Only applies when using `ChatGPTClient`.
 5 |     cacheOptions: {},
 6 |     // If set, `ChatGPTClient` will use `keyv-file` to store conversations to this JSON file instead of in memory.
 7 |     // However, `cacheOptions.store` will override this if set
 8 |     storageFilePath: process.env.STORAGE_FILE_PATH || './cache.json',
 9 |     chatGptClient: {
10 |         // Your OpenAI API key (for `ChatGPTClient`)
11 |         openaiApiKey: process.env.OPENAI_API_KEY || '',
12 |         // (Optional) Support for a reverse proxy for the completions endpoint (private API server).
13 |         // Warning: This will expose your `openaiApiKey` to a third party. Consider the risks before using this.
14 |         reverseProxyUrl: '',
15 |         // (Optional) Parameters as described in https://platform.openai.com/docs/api-reference/completions
16 |         modelOptions: {
17 |             // You can override the model name and any other parameters here.
18 |             model: process.env.OPENAI_MODEL || 'gpt-3.5-turbo',
19 |             // Set max_tokens here to override the default max_tokens of 1000 for the completion.
20 |             // max_tokens: 1000,
21 |         },
22 |         // (Optional) Davinci models have a max context length of 4097 tokens, but you may need to change this for other models.
23 |         // maxContextTokens: 4097,
24 |         // (Optional) You might want to lower this to save money if using a paid model like `text-davinci-003`.
25 |         // Earlier messages will be dropped until the prompt is within the limit.
26 |         // maxPromptTokens: 3097,
27 |         // (Optional) Set custom instructions instead of "You are ChatGPT...".
28 |         // promptPrefix: 'You are Bob, a cowboy in Western times...',
29 |         // (Optional) Set a custom name for the user
30 |         // userLabel: 'User',
31 |         // (Optional) Set a custom name for ChatGPT
32 |         // chatGptLabel: 'ChatGPT',
33 |         // (Optional) Set to true to enable `console.debug()` logging
34 |         // A proxy string like "http://<ip>:<port>"
35 |         proxy: process.env.PROXY || '',
36 |         debug: false,
37 |     },
38 |     // Options for the Bing client
39 |     bingAiClient: {
40 |         // Necessary for some people in different countries, e.g. China (https://cn.bing.com)
41 |         host: '',
42 |         // The "_U" cookie value from bing.com
43 |         userToken: '',
44 |         // If the above doesn't work, provide all your cookies as a string instead
45 |         cookies: '',
46 |         // A proxy string like "http://<ip>:<port>"
47 |         proxy: '',
48 |         // (Optional) Set to true to enable `console.debug()` logging
49 |         debug: false,
50 |     },
51 |     chatGptBrowserClient: {
52 |         // (Optional) Support for a reverse proxy for the completions endpoint (private API server).
53 |         // Warning: This will expose your access token to a third party. Consider the risks before using this.
54 |         reverseProxyUrl: 'https://chatgpt.duti.tech/api/conversation',
55 |         // Access token from https://chat.openai.com/api/auth/session
56 |         accessToken: process.env.GPT_BROWSER_TOKEN || '',
57 |         // Cookies from chat.openai.com (likely not required if using reverse proxy server).
58 |         cookies: '',
59 |         // (Optional) Set to true to enable `console.debug()` logging
60 |         // debug: true,
61 |     },
62 |     // Options for the API server
63 |     apiOptions: {
64 |         port: process.env.API_PORT || 3000,
65 |         host: process.env.API_HOST || '0.0.0.0',
66 |         // (Optional) Set to true to enable `console.debug()` logging
67 |         debug: false,
68 |         // (Optional) Possible options: "chatgpt", "chatgpt-browser", "bing". (Default: "chatgpt")
69 |         clientToUse: process.env.CLIENT || '',
70 |         // (Optional) Set this to allow changing the client or client options in POST /conversation.
71 |         // To disable, set to `null`.
72 |         perMessageClientOptionsWhitelist: {
73 |             // The ability to switch clients using `clientOptions.clientToUse` will be disabled if `validClientsToUse` is not set.
74 |             // To allow switching clients per message, you must set `validClientsToUse` to a non-empty array.
75 |             validClientsToUse: ['bing', 'chatgpt', 'chatgpt-browser'], // values from possible `clientToUse` options above
76 |             // The Object key, e.g. "chatgpt", is a value from `validClientsToUse`.
77 |             // If not set, ALL options will be ALLOWED to be changed. For example, `bing` is not defined in `perMessageClientOptionsWhitelist` above,
78 |             // so all options for `bingAiClient` will be allowed to be changed.
79 |             // If set, ONLY the options listed here will be allowed to be changed.
80 |             // In this example, each array element is a string representing a property in `chatGptClient` above.
81 |             chatgpt: [
82 |                 'promptPrefix',
83 |                 'userLabel',
84 |                 'chatGptLabel',
85 |                 // Setting `modelOptions.temperature` here will allow changing ONLY the temperature.
86 |                 // Other options like `modelOptions.model` will not be allowed to be changed.
87 |                 // If you want to allow changing all `modelOptions`, define `modelOptions` here instead of `modelOptions.temperature`.
88 |                 'modelOptions.temperature',
89 |             ],
90 |         },
91 |     },
92 |     // Options for the CLI app
93 |     cliOptions: {
94 |         // (Optional) Set to "bing" to use `BingAIClient` instead of `ChatGPTClient`.
95 |         // clientToUse: 'bing',
96 |     },
97 | };
98 | 


--------------------------------------------------------------------------------
/utils/client/ChatGPTClient.js:
--------------------------------------------------------------------------------
  1 | import { nanoid } from 'nanoid';
  2 | import { createParser } from "eventsource-parser";
  3 | // import { encoding_for_model as encodingForModel, get_encoding as getEncoding } from '@dqbd/tiktoken';
  4 | // @ts-expect-error
  5 | import * as wasm from "@dqbd/tiktoken/lite/tiktoken_bg.wasm?module";
  6 | import model from "@dqbd/tiktoken/encoders/cl100k_base.json";
  7 | import { init, Tiktoken } from "@dqbd/tiktoken/lite/init";
  8 | 
  9 | const CHATGPT_MODEL = 'gpt-3.5-turbo';
 10 | 
 11 | const tokenizersCache = {};
 12 | 
 13 | export default class ChatGPTClient {
 14 |     constructor(
 15 |         apiKey,
 16 |         cacheInstance = null,
 17 |         options = {},
 18 |         cacheOptions = {},
 19 |     ) {
 20 |         this.apiKey = apiKey;
 21 | 
 22 |         cacheOptions.namespace = cacheOptions.namespace || 'chatgpt';
 23 |         this.conversationsCache = cacheInstance
 24 | 
 25 |         this.setOptions(options);
 26 |     }
 27 | 
 28 |     async setOptions(options) {
 29 |         if (this.options && !this.options.replaceOptions) {
 30 |             this.options = {
 31 |                 ...this.options,
 32 |                 ...options,
 33 |             };
 34 |         } else {
 35 |             this.options = options;
 36 |         }
 37 | 
 38 |         // if (this.options.openaiApiKey) {
 39 |         //     this.apiKey = this.options.openaiApiKey;
 40 |         // }
 41 | 
 42 |         const modelOptions = this.options.modelOptions || {};
 43 |         this.modelOptions = {
 44 |             ...modelOptions,
 45 |             // set some good defaults (check for undefined in some cases because they may be 0)
 46 |             model: modelOptions.model || CHATGPT_MODEL,
 47 |             temperature: typeof modelOptions.temperature === 'undefined' ? 0.8 : modelOptions.temperature,
 48 |             top_p: typeof modelOptions.top_p === 'undefined' ? 1 : modelOptions.top_p,
 49 |             presence_penalty: typeof modelOptions.presence_penalty === 'undefined' ? 1 : modelOptions.presence_penalty,
 50 |             stop: modelOptions.stop,
 51 |         };
 52 | 
 53 |         this.isChatGptModel = this.modelOptions.model.startsWith('gpt-3.5-turbo');
 54 |         const { isChatGptModel } = this;
 55 |         this.isUnofficialChatGptModel = this.modelOptions.model.startsWith('text-chat') || this.modelOptions.model.startsWith('text-davinci-002-render');
 56 |         const { isUnofficialChatGptModel } = this;
 57 | 
 58 |         // Davinci models have a max context length of 4097 tokens.
 59 |         this.maxContextTokens = this.options.maxContextTokens || (isChatGptModel ? 4095 : 4097);
 60 |         // I decided to reserve 1024 tokens for the response.
 61 |         // The max prompt tokens is determined by the max context tokens minus the max response tokens.
 62 |         // Earlier messages will be dropped until the prompt is within the limit.
 63 |         this.maxResponseTokens = this.modelOptions.max_tokens || 1024;
 64 |         this.maxPromptTokens = this.options.maxPromptTokens || (this.maxContextTokens - this.maxResponseTokens);
 65 | 
 66 |         if (this.maxPromptTokens + this.maxResponseTokens > this.maxContextTokens) {
 67 |             throw new Error(`maxPromptTokens + max_tokens (${this.maxPromptTokens} + ${this.maxResponseTokens} = ${this.maxPromptTokens + this.maxResponseTokens}) must be less than or equal to maxContextTokens (${this.maxContextTokens})`);
 68 |         }
 69 | 
 70 |         this.userLabel = this.options.userLabel || 'User';
 71 |         this.chatGptLabel = this.options.chatGptLabel || 'ChatGPT';
 72 | 
 73 |         await init((imports) => WebAssembly.instantiate(wasm, imports));
 74 | 
 75 |         if (isChatGptModel) {
 76 |             // Use these faux tokens to help the AI understand the context since we are building the chat log ourselves.
 77 |             // Trying to use "<|im_start|>" causes the AI to still generate "<" or "<|" at the end sometimes for some reason,
 78 |             // without tripping the stop sequences, so I'm using "||>" instead.
 79 |             this.startToken = '||>';
 80 |             this.endToken = '';
 81 |             this.gptEncoder = this.constructor.getTokenizer('cl100k_base');
 82 |         } else if (isUnofficialChatGptModel) {
 83 |             this.startToken = '<|im_start|>';
 84 |             this.endToken = '<|im_end|>';
 85 |             this.gptEncoder = this.constructor.getTokenizer('text-davinci-003', true, {
 86 |                 '<|im_start|>': 100264,
 87 |                 '<|im_end|>': 100265,
 88 |             });
 89 |         } else {
 90 |             // Previously I was trying to use "<|endoftext|>" but there seems to be some bug with OpenAI's token counting
 91 |             // system that causes only the first "<|endoftext|>" to be counted as 1 token, and the rest are not treated
 92 |             // as a single token. So we're using this instead.
 93 |             this.startToken = '||>';
 94 |             this.endToken = '';
 95 |             try {
 96 |                 this.gptEncoder = this.constructor.getTokenizer(this.modelOptions.model, true);
 97 |             } catch {
 98 |                 this.gptEncoder = this.constructor.getTokenizer('text-davinci-003', true);
 99 |             }
100 |         }
101 | 
102 |         if (!this.modelOptions.stop) {
103 |             const stopTokens = [this.startToken];
104 |             if (this.endToken && this.endToken !== this.startToken) {
105 |                 stopTokens.push(this.endToken);
106 |             }
107 |             stopTokens.push(`\n${this.userLabel}:`);
108 |             // I chose not to do one for `chatGptLabel` because I've never seen it happen
109 |             this.modelOptions.stop = stopTokens;
110 |         }
111 | 
112 |         if (this.options.reverseProxyUrl) {
113 |             this.completionsUrl = this.options.reverseProxyUrl;
114 |         } else if (isChatGptModel) {
115 |             this.completionsUrl = 'https://api.openai.com/v1/chat/completions';
116 |         } else {
117 |             this.completionsUrl = 'https://api.openai.com/v1/completions';
118 |         }
119 | 
120 |         return this;
121 |     }
122 | 
123 |     static getTokenizer(encoding, isModelName = false, extendSpecialTokens = {}) {
124 |         if (tokenizersCache[encoding]) {
125 |             return tokenizersCache[encoding];
126 |         }
127 | 
128 |         const encoder = new Tiktoken(
129 |             model.bpe_ranks,
130 |             model.special_tokens,
131 |             model.pat_str
132 |         );
133 | 
134 |         // TODO: Support more encoder
135 |         return encoder;
136 |         // const tokens = encoding.encode("hello world");
137 | 
138 |         // let tokenizer;
139 |         // if (isModelName) {
140 |         //     tokenizer = encodingForModel(encoding, extendSpecialTokens);
141 |         // } else {
142 |         //     tokenizer = getEncoding(encoding, extendSpecialTokens);
143 |         // }
144 |         // tokenizersCache[encoding] = tokenizer;
145 |         // return tokenizer;
146 |     }
147 | 
148 |     async getCompletion({
149 |         input,
150 |         abortController,
151 |         conversationId,
152 |         onEnd,
153 |         onError,
154 |     }) {
155 |         const self = this;
156 |         if (!abortController) {
157 |             abortController = new AbortController();
158 |         }
159 |         const modelOptions = { ...this.modelOptions, stream: true };
160 |         // if (typeof onProgress === 'function') {
161 |         //     modelOptions.stream = true;
162 |         // }
163 |         if (this.isChatGptModel) {
164 |             modelOptions.messages = input;
165 |         } else {
166 |             modelOptions.prompt = input;
167 |         }
168 |         const { debug } = this.options;
169 |         const url = this.completionsUrl;
170 |  
171 |         const opts = {
172 |             method: 'POST',
173 |             headers: {
174 |                 'Content-Type': 'application/json',
175 |                 Authorization: `Bearer ${this.apiKey}`,
176 |             },
177 |             body: JSON.stringify(modelOptions),
178 |             // dispatcher: new Agent({
179 |             //     bodyTimeout: 0,
180 |             //     headersTimeout: 0,
181 |             // }),
182 |         };
183 | 
184 |         if (this.options.proxy) {
185 |             // opts.dispatcher = new ProxyAgent(this.options.proxy);
186 |         }
187 | 
188 |         const encoder = new TextEncoder();
189 |         const decoder = new TextDecoder();
190 | 
191 |         let counter = 0;
192 | 
193 |         const res = await fetch(url, {
194 |             ...opts,
195 |             signal: abortController.signal,
196 |             }).catch(err => {
197 |                 console.error('fetch catch: ', err);
198 |                 return err?.message || 'fetch failed';
199 |             })
200 | 
201 |             if (!res || (typeof res === 'string')) {
202 |                 return res;
203 |             }
204 | 
205 |         let reply = '';
206 |         const stream = new ReadableStream({
207 |             async start(controller) {
208 |                 // callback
209 |                 function onParse(event) {
210 |                     if (event.type === "event") {
211 |                         const data = event.data;
212 |                         // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
213 |                         if (data === "[DONE]") {
214 |                             reply = reply.trim();
215 | 
216 |                             const replyMessage = {
217 |                                 id: nanoid(),
218 |                                 conversationId,
219 |                                 message: reply,
220 |                                 success: true,
221 |                             };
222 |                             const queue = encoder.encode('[__REPORT__]' + JSON.stringify(replyMessage));
223 |                             controller.enqueue(queue);
224 |                             setTimeout(() => {
225 |                                 controller.close();
226 |                                 reply = null;
227 |                             }, 300);
228 | 
229 |                             onEnd(replyMessage)
230 |                             return;
231 |                         }
232 |                         if (data === self.endToken) {
233 |                             return;
234 |                         }
235 |                         try {
236 |                             const json = JSON.parse(data);
237 |                             console.log('openai resp data: ', json);
238 |                             const text = json.choices[0].delta?.content || "";
239 |                             if (!text) {
240 |                                 return;
241 |                             }
242 |                             
243 |                             if (counter < 2 && (text.match(/\n/) || []).length) {
244 |                                 // this is a prefix character (i.e., "\n\n"), do nothing
245 |                                 return;
246 |                             }
247 |                             reply += text;
248 |                             const queue = encoder.encode(text);
249 |                             controller.enqueue(queue);
250 |                             counter++;
251 |                         } catch (e) {
252 |                             // maybe parse error
253 |                             controller.error(e);
254 |                             onError(e);
255 |                         }
256 |                     }
257 |                 }
258 | 
259 |                 // stream response (SSE) from OpenAI may be fragmented into multiple chunks
260 |                 // this ensures we properly read chunks and invoke an event for each SSE event stream
261 |                 const parser = createParser(onParse);
262 |                 // https://web.dev/streams/#asynchronous-iteration
263 |                 for await (const chunk of res.body) {
264 |                     parser.feed(decoder.decode(chunk));
265 |                 }
266 |             },
267 |         });
268 | 
269 |         return stream;
270 | 
271 |         // eslint-disable-next-line no-async-promise-executor
272 |         return new Promise(async (resolve, reject) => {
273 |             try {
274 |                 let done = false;
275 |                 await fetchEventSource(url, {
276 |                     ...opts,
277 |                     signal: abortController.signal,
278 |                     async onopen(response) {
279 |                         if (response.status === 200) {
280 |                             return;
281 |                         }
282 |                         if (debug) {
283 |                             console.debug(response);
284 |                         }
285 |                         let error;
286 |                         try {
287 |                             const body = await response.text();
288 |                             error = new Error(`Failed to send message. HTTP ${response.status} - ${body}`);
289 |                             error.status = response.status;
290 |                             error.json = JSON.parse(body);
291 |                         } catch {
292 |                             error = error || new Error(`Failed to send message. HTTP ${response.status}`);
293 |                         }
294 |                         throw error;
295 |                     },
296 |                     onclose() {
297 |                         if (debug) {
298 |                             console.debug('Server closed the connection unexpectedly, returning...');
299 |                         }
300 |                         // workaround for private API not sending [DONE] event
301 |                         if (!done) {
302 |                             onProgress('[DONE]');
303 |                             abortController.abort();
304 |                             resolve();
305 |                         }
306 |                     },
307 |                     onerror(err) {
308 |                         if (debug) {
309 |                             console.debug(err);
310 |                         }
311 |                         // rethrow to stop the operation
312 |                         throw err;
313 |                     },
314 |                     onmessage(message) {
315 |                         if (debug) {
316 |                             console.debug(message);
317 |                         }
318 |                         if (!message.data || message.event === 'ping') {
319 |                             return;
320 |                         }
321 |                         if (message.data === '[DONE]') {
322 |                             onProgress('[DONE]');
323 |                             abortController.abort();
324 |                             resolve();
325 |                             done = true;
326 |                             return;
327 |                         }
328 |                         onProgress(JSON.parse(message.data));
329 |                     },
330 |                 });
331 |             } catch (err) {
332 |                 reject(err);
333 |             }
334 |         });
335 |     }
336 | 
337 |     async sendMessage(
338 |         message,
339 |         opts = {},
340 |     ) {
341 |         if (opts.clientOptions && typeof opts.clientOptions === 'object') {
342 |             await this.setOptions(opts.clientOptions);
343 |         }
344 | 
345 |         const conversationId = opts.conversationId || nanoid();
346 |         const parentMessageId = opts.parentMessageId || nanoid();
347 | 
348 |         let conversation = await this.conversationsCache.get(conversationId);
349 |         if (!conversation) {
350 |             conversation = {
351 |                 messages: [],
352 |                 createdAt: Date.now(),
353 |             };
354 |         }
355 | 
356 |         const userMessage = {
357 |             id: nanoid(),
358 |             parentMessageId,
359 |             role: 'User',
360 |             message,
361 |         };
362 |         conversation.messages.push(userMessage);
363 | 
364 |         let payload;
365 |         if (this.isChatGptModel) {
366 |             // Doing it this way instead of having each message be a separate element in the array seems to be more reliable,
367 |             // especially when it comes to keeping the AI in character. It also seems to improve coherency and context retention.
368 |             payload = await this.buildPrompt(conversation.messages, userMessage.id, true);
369 |         } else {
370 |             payload = await this.buildPrompt(conversation.messages, userMessage.id);
371 |         }
372 | 
373 |         const stream = await this.getCompletion({
374 |             input: payload,
375 |             abortController: opts.abortController || new AbortController(),
376 |             conversationId,
377 |             onEnd: async (replyMessage) => {
378 |                 console.log('completion result: ', replyMessage);
379 |                 if (!replyMessage) return;
380 |                 conversation.messages.push({
381 |                     ...replyMessage,
382 |                     parentMessageId: userMessage.id,
383 |                     role: 'ChatGPT',
384 |                 });
385 | 
386 |                 await this.conversationsCache.set(conversationId, conversation);
387 | 
388 |                 opts.onEnd && opts.onEnd(replyMessage);
389 | 
390 |                 return {
391 |                     response: replyMessage.message,
392 |                     conversationId,
393 |                     messageId: replyMessage.id,
394 |                 };
395 |             },
396 |             onError: (err) => {
397 |                 console.error('completion error: ', err);
398 |             }
399 |         });
400 |         
401 |         console.log('get completion stream got down', stream);
402 |         return stream;
403 |     }
404 | 
405 |     async buildPrompt(messages, parentMessageId, isChatGptModel = false) {
406 |         const orderedMessages = this.constructor.getMessagesForConversation(messages, parentMessageId);
407 | 
408 |         let promptPrefix;
409 |         if (this.options.promptPrefix) {
410 |             promptPrefix = this.options.promptPrefix.trim();
411 |             // If the prompt prefix doesn't end with the end token, add it.
412 |             if (!promptPrefix.endsWith(`${this.endToken}`)) {
413 |                 promptPrefix = `${promptPrefix.trim()}${this.endToken}\n\n`;
414 |             }
415 |             promptPrefix = `${this.startToken}Instructions:\n${promptPrefix}`;
416 |         } else {
417 |             const currentDateString = new Date().toLocaleDateString(
418 |                 'en-us',
419 |                 { year: 'numeric', month: 'long', day: 'numeric' },
420 |             );
421 |             promptPrefix = `${this.startToken}Instructions:\nYou are ChatGPT, a large language model trained by OpenAI. Respond conversationally.\nCurrent date: ${currentDateString}${this.endToken}\n\n`;
422 |         }
423 | 
424 |         const promptSuffix = `${this.startToken}${this.chatGptLabel}:\n`; // Prompt ChatGPT to respond.
425 | 
426 |         const instructionsPayload = {
427 |             role: 'system',
428 |             name: 'instructions',
429 |             content: promptPrefix,
430 |         };
431 | 
432 |         const messagePayload = {
433 |             role: 'system',
434 |             name: 'user',
435 |             content: promptSuffix,
436 |         };
437 | 
438 |         let currentTokenCount;
439 |         if (isChatGptModel) {
440 |             currentTokenCount = this.getTokenCountForMessage(instructionsPayload) + this.getTokenCountForMessage(messagePayload);
441 |         } else {
442 |             currentTokenCount = this.getTokenCount(`${promptPrefix}${promptSuffix}`);
443 |         }
444 |         let promptBody = '';
445 |         const maxTokenCount = this.maxPromptTokens;
446 | 
447 |         // Iterate backwards through the messages, adding them to the prompt until we reach the max token count.
448 |         // Do this within a recursive async function so that it doesn't block the event loop for too long.
449 |         const buildPromptBody = async () => {
450 |             if (currentTokenCount < maxTokenCount && orderedMessages.length > 0) {
451 |                 const message = orderedMessages.pop();
452 |                 const roleLabel = message.role === 'User' ? this.userLabel : this.chatGptLabel;
453 |                 const messageString = `${this.startToken}${roleLabel}:\n${message.message}${this.endToken}\n`;
454 |                 let newPromptBody;
455 |                 if (promptBody || isChatGptModel) {
456 |                     newPromptBody = `${messageString}${promptBody}`;
457 |                 } else {
458 |                     // Always insert prompt prefix before the last user message, if not gpt-3.5-turbo.
459 |                     // This makes the AI obey the prompt instructions better, which is important for custom instructions.
460 |                     // After a bunch of testing, it doesn't seem to cause the AI any confusion, even if you ask it things
461 |                     // like "what's the last thing I wrote?".
462 |                     newPromptBody = `${promptPrefix}${messageString}${promptBody}`;
463 |                 }
464 | 
465 |                 const tokenCountForMessage = this.getTokenCount(messageString);
466 |                 const newTokenCount = currentTokenCount + tokenCountForMessage;
467 |                 if (newTokenCount > maxTokenCount) {
468 |                     if (promptBody) {
469 |                         // This message would put us over the token limit, so don't add it.
470 |                         return false;
471 |                     }
472 |                     // This is the first message, so we can't add it. Just throw an error.
473 |                     throw new Error(`Prompt is too long. Max token count is ${maxTokenCount}, but prompt is ${newTokenCount} tokens long.`);
474 |                 }
475 |                 promptBody = newPromptBody;
476 |                 currentTokenCount = newTokenCount;
477 |                 // wait for next tick to avoid blocking the event loop
478 |                 await new Promise(resolve => setTimeout(resolve, 0));
479 |                 return buildPromptBody();
480 |             }
481 |             return true;
482 |         };
483 | 
484 |         await buildPromptBody();
485 | 
486 |         const prompt = `${promptBody}${promptSuffix}`;
487 |         if (isChatGptModel) {
488 |             messagePayload.content = prompt;
489 |             // Add 2 tokens for metadata after all messages have been counted.
490 |             currentTokenCount += 2;
491 |         }
492 | 
493 |         // Use up to `this.maxContextTokens` tokens (prompt + response), but try to leave `this.maxTokens` tokens for the response.
494 |         this.modelOptions.max_tokens = Math.min(this.maxContextTokens - currentTokenCount, this.maxResponseTokens);
495 | 
496 |         if (isChatGptModel) {
497 |             return [
498 |                 instructionsPayload,
499 |                 messagePayload,
500 |             ];
501 |         }
502 |         return prompt;
503 |     }
504 | 
505 |     getTokenCount(text) {
506 |         return this.gptEncoder.encode(text, 'all').length;
507 |     }
508 | 
509 |     /**
510 |      * Algorithm adapted from "6. Counting tokens for chat API calls" of
511 |      * https://github.com/openai/openai-cookbook/blob/main/examples/How_to_count_tokens_with_tiktoken.ipynb
512 |      *
513 |      * An additional 2 tokens need to be added for metadata after all messages have been counted.
514 |      *
515 |      * @param {*} message
516 |      */
517 |     getTokenCountForMessage(message) {
518 |         // Map each property of the message to the number of tokens it contains
519 |         const propertyTokenCounts = Object.entries(message).map(([key, value]) => {
520 |             // Count the number of tokens in the property value
521 |             const numTokens = this.getTokenCount(value);
522 | 
523 |             // Subtract 1 token if the property key is 'name'
524 |             const adjustment = (key === 'name') ? 1 : 0;
525 |             return numTokens - adjustment;
526 |         });
527 | 
528 |         // Sum the number of tokens in all properties and add 4 for metadata
529 |         return propertyTokenCounts.reduce((a, b) => a + b, 4);
530 |     }
531 | 
532 |     /**
533 |      * Iterate through messages, building an array based on the parentMessageId.
534 |      * Each message has an id and a parentMessageId. The parentMessageId is the id of the message that this message is a reply to.
535 |      * @param messages
536 |      * @param parentMessageId
537 |      * @returns {*[]} An array containing the messages in the order they should be displayed, starting with the root message.
538 |      */
539 |     static getMessagesForConversation(messages, parentMessageId) {
540 |         const orderedMessages = [];
541 |         let currentMessageId = parentMessageId;
542 |         while (currentMessageId) {
543 |             // eslint-disable-next-line no-loop-func
544 |             const message = messages.find(m => m.id === currentMessageId);
545 |             if (!message) {
546 |                 break;
547 |             }
548 |             orderedMessages.unshift(message);
549 |             currentMessageId = message.parentMessageId;
550 |         }
551 | 
552 |         return orderedMessages;
553 |     }
554 | }
555 | 


--------------------------------------------------------------------------------