Merge pull request ChatGPTNextWeb#993 from Yidadaa/session-config

v2.0 Prompt Templates

.github/ISSUE_TEMPLATE/反馈问题.md

@@ -11,9 +11,10 @@ assignees: ''
 
 ⚠️ 注意：不遵循此模板的任何帖子都会被立即关闭。
 
-> 请在下方中括号内输入 x 来表示你已经知晓相关内容。
+请在下方中括号内输入 x 来表示你已经知晓相关内容。
 - [ ] 我确认已经在 [常见问题](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/faq-cn.md) 中搜索了此次反馈的问题，没有找到解答；
 - [ ] 我确认已经在 [Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) 列表（包括已经 Close 的）中搜索了此次反馈的问题，没有找到解答。
+- [ ] 我确认已经在 [Vercel 使用教程](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/vercel-cn.md) 中搜索了此次反馈的问题，没有找到解答。
 
 **描述问题**
 请在此描述你遇到了什么问题。

README.md

@@ -28,6 +28,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - Privacy first, all data stored locally in the browser
 - Responsive design, dark mode and PWA
 - Fast first screen loading speed (~100kb), support streaming response
+- New in v2: create, share and debug your chat tools with prompt templates (mask)
 - Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)
 - Automatically compresses chat history to support long conversations while also saving your tokens
 - One-click export all chat history with full Markdown support
@@ -37,7 +38,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 
 - [x] System Prompt: pin a user defined prompt as system prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
 - [x] User Prompt: user can edit and save custom prompts to prompt list
-- [ ] Prompt Template: create a new chat with pre-defined in-context prompts
+- [x] Prompt Template: create a new chat with pre-defined in-context prompts [#993](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/993)
 - [ ] Share as image, share to ShareGPT
 - [ ] Desktop App with tauri
 - [ ] Self-host Model: support llama, alpaca, ChatGLM, BELLE etc.
@@ -48,12 +49,16 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - User login, accounts, cloud sync
 - UI text customize
 
+## What's New
+- 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/).
+
 ## 主要功能
 
 - 在 1 分钟内使用 Vercel **免费一键部署**
 - 精心设计的 UI，响应式设计，支持深色模式，支持 PWA
 - 极快的首屏加载速度（~100kb），支持流式响应
 - 隐私安全，所有数据保存在用户浏览器本地
+- 预制角色功能（面具），方便地创建、分享和调试你的个性化对话
 - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
 - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
 - 一键导出聊天记录，完整的 Markdown 支持
@@ -63,7 +68,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 
 - [x] 为每个对话设置系统 Prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
 - [x] 允许用户自行编辑内置 Prompt 列表
-- [ ] 提示词模板：使用预制上下文快速定制新对话
+- [x] 预制角色：使用预制角色快速定制新对话 [#993](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/993)
 - [ ] 分享为图片，分享到 ShareGPT
 - [ ] 使用 tauri 打包桌面应用
 - [ ] 支持自部署的大语言模型
@@ -74,6 +79,11 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - 界面文字自定义
 - 用户登录、账号管理、消息云同步
 
+## 最新动态
+- 🚀 v2.0 已经发布，现在你可以使用面具功能快速创建预制对话了！ 了解更多： [ChatGPT 提示词高阶技能：零次、一次和少样本提示](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)。
+
+
+
 ## Get Started
 
 > [简体中文 > 如何开始使用](./README_CN.md#开始使用)
@@ -103,6 +113,8 @@ We recommend that you follow the steps below to re-deploy:
 
 ### Enable Automatic Updates
 
+> If you encounter a failure of Upstream Sync execution, please manually sync fork once.
+
 After forking the project, due to the limitations imposed by GitHub, you need to manually enable Workflows and Upstream Sync Action on the Actions page of the forked project. Once enabled, automatic updates will be scheduled every hour:
 
 ![Automatic Updates](./docs/images/enable-actions.jpg)

README_CN.md

@@ -15,16 +15,6 @@
 
 </div>
 
-## 主要功能
-
-- 在 1 分钟内使用 Vercel **免费一键部署**
-- 精心设计的 UI，响应式设计，支持深色模式
-- 极快的首屏加载速度（~100kb）
-- 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
-- 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
-- 一键导出聊天记录，完整的 Markdown 支持
-- 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
-
 ## 开始使用
 
 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
@@ -43,6 +33,7 @@
 - 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。
 
 ### 打开自动更新
+> 如果你遇到了 Upstream Sync 执行错误，请手动 Sync Fork 一次！
 
 当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新：
 

app/api/chat-stream/route.ts

@@ -59,4 +59,4 @@ export async function POST(req: NextRequest) {
  }
 }
 
-export const runtime = "experimental-edge";
+export const runtime = "edge";

app/api/config/route.ts

@@ -19,3 +19,5 @@ export async function POST(req: NextRequest) {
  needCode: serverConfig.needCode,
  });
 }
+
+export const runtime = "edge";

app/api/openai/route.ts

@@ -17,7 +17,7 @@ async function makeRequest(req: NextRequest) {
  },
  {
  status: 500,
- }
+ },
  );
  }
 }
@@ -30,4 +30,4 @@ export async function GET(req: NextRequest) {
  return makeRequest(req);
 }
 
-export const runtime = "experimental-edge";
+export const runtime = "edge";

app/api/openai/typing.ts

@@ -5,3 +5,5 @@ import type {
 
 export type ChatRequest = CreateChatCompletionRequest;
 export type ChatResponse = CreateChatCompletionResponse;
+
+export type Updater<T> = (updater: (value: T) => void) => void;

app/components/button.module.scss

@@ -18,6 +18,15 @@
  cursor: not-allowed;
  opacity: 0.5;
  }
+
+ &.primary {
+ background-color: var(--primary);
+ color: white;
+
+ path {
+ fill: white !important;
+ }
+ }
 }
 
 .shadow {

app/components/button.tsx

@@ -4,11 +4,11 @@ import styles from "./button.module.scss";
 
 export function IconButton(props: {
  onClick?: () => void;
- icon: JSX.Element;
+ icon?: JSX.Element;
+ type?: "primary" | "danger";
  text?: string;
  bordered?: boolean;
  shadow?: boolean;
- noDark?: boolean;
  className?: string;
  title?: string;
  disabled?: boolean;
@@ -19,18 +19,24 @@ export function IconButton(props: {
  styles["icon-button"] +
  ` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
  props.className ?? ""
- } clickable`
+ } clickable ${styles[props.type ?? ""]}`
  }
  onClick={props.onClick}
  title={props.title}
  disabled={props.disabled}
  role="button"
  >
- <div
- className={styles["icon-button-icon"] + ` ${props.noDark && "no-dark"}`}
- >
- {props.icon}
- </div>
+ {props.icon && (
+ <div
+ className={
+ styles["icon-button-icon"] +
+ ` ${props.type === "primary" && "no-dark"}`
+ }
+ >
+ {props.icon}
+ </div>
+ )}
+
  {props.text && (
  <div className={styles["icon-button-text"]}>{props.text}</div>
  )}

app/components/chat-list.tsx

@@ -1,4 +1,6 @@
 import DeleteIcon from "../icons/delete.svg";
+import BotIcon from "../icons/bot.svg";
+
 import styles from "./home.module.scss";
 import {
  DragDropContext,
@@ -12,6 +14,8 @@ import { useChatStore } from "../store";
 import Locale from "../locales";
 import { Link, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
+import { MaskAvatar } from "./mask";
+import { Mask } from "../store/mask";
 
 export function ChatItem(props: {
  onClick?: () => void;
@@ -23,6 +27,7 @@ export function ChatItem(props: {
  id: number;
  index: number;
  narrow?: boolean;
+ mask: Mask;
 }) {
  return (
  <Draggable draggableId={`${props.id}`} index={props.index}>
@@ -35,17 +40,29 @@ export function ChatItem(props: {
  ref={provided.innerRef}
  {...provided.draggableProps}
  {...provided.dragHandleProps}
+ title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
+ props.count,
+ )}`}
  >
  {props.narrow ? (
- <div className={styles["chat-item-narrow"]}>{props.count}</div>
+ <div className={styles["chat-item-narrow"]}>
+ <div className={styles["chat-item-avatar"] + " no-dark"}>
+ <MaskAvatar mask={props.mask} />
+ </div>
+ <div className={styles["chat-item-narrow-count"]}>
+ {props.count}
+ </div>
+ </div>
  ) : (
  <>
  <div className={styles["chat-item-title"]}>{props.title}</div>
  <div className={styles["chat-item-info"]}>
  <div className={styles["chat-item-count"]}>
  {Locale.ChatItem.ChatItemCount(props.count)}
  </div>
- <div className={styles["chat-item-date"]}>{props.time}</div>
+ <div className={styles["chat-item-date"]}>
+ {new Date(props.time).toLocaleString()}
+ </div>
  </div>
  </>
  )}
@@ -99,7 +116,7 @@ export function ChatList(props: { narrow?: boolean }) {
  {sessions.map((item, i) => (
  <ChatItem
  title={item.topic}
- time={item.lastUpdate}
+ time={new Date(item.lastUpdate).toLocaleString()}
  count={item.messages.length}
  key={item.id}
  id={item.id}
@@ -115,6 +132,7 @@ export function ChatList(props: { narrow?: boolean }) {
  }
  }}
  narrow={props.narrow}
+ mask={item.mask}
  />
  ))}
  {provided.placeholder}

app/components/chat.module.scss

@@ -53,6 +53,20 @@
  }
 }
 
+.section-title {
+ font-size: 12px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .section-title-action {
+ display: flex;
+ align-items: center;
+ }
+}
+
 .context-prompt {
  .context-prompt-row {
  display: flex;
@@ -81,25 +95,13 @@
 }
 
 .memory-prompt {
- margin-top: 20px;
-
- .memory-prompt-title {
- font-size: 12px;
- font-weight: bold;
- margin-bottom: 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .memory-prompt-action {
- display: flex;
- align-items: center;
- }
- }
+ margin: 20px 0;
 
  .memory-prompt-content {
- background-color: var(--gray);
- border-radius: 6px;
+ background-color: var(--white);
+ color: var(--black);
+ border: var(--border-in-light);
+ border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  user-select: text;