Improve drawer width and conversation list style.

README.md

@@ -2,9 +2,11 @@
   <img alt="demo" src="./demos/demo.png?v=1">
 </p>
 
+[English](./README.md) | [中文](./docs/zh/README.md)
+
 # ChatGPT UI
 
-A web client for ChatGPT, using OpenAI's API. Provides Docker images and also supports quick deployment to servers using shell scripts.
+A ChatGPT web client that supports multiple users, multiple database connections for persistent data storage, supports i18n. Provides Docker images and quick deployment scripts.
 
 ## 📢Updates
 
@@ -82,7 +84,7 @@ services:
     environment:
       - APP_DOMAIN=${APP_DOMAIN:-localhost:9000} # CSRF whitelist，Add the address of your chatgpt-ui-web-server here, default is localhost:9000
       #- DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
-      #- OPENAI_API_PROXY=https://openai.proxy.com # If you are in China, you can use the proxy provided by the author to speed up the connection to the OpenAI API. If you do not need to use the proxy, you can delete this parameter.
+      #- OPENAI_API_PROXY=https://openai.proxy.com/v1 # Proxy for https://api.openai.com/v1
       - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
       - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
       - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
@@ -112,16 +114,26 @@ networks:
     driver: bridge
 ```
 
+### DB_URL schema
+
+| Engine               | URL                                              |
+|----------------------|--------------------------------------------------|
+| PostgreSQL           | ``postgres://USER:PASSWORD@HOST:PORT/NAME``      |
+| MySQL                | ``mysql://USER:PASSWORD@HOST:PORT/NAME``         |
+| SQLite               | ``sqlite:///PATH``                               |
+
+
 ### Set API key
 
-After running the services, you can access the web client at `http://localhost`, and an admin panel at `http://localhost:9000/admin`.
+Access `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` to log in to the administration panel.
 
 Default superuser: `admin`
 
 Default password: `password`
 
-Before you can start chatting, you need to log in to the admin panel to add an OpenAI API key. In the Settings model, add a record with the name `openai_api_key` and the value as your API key.
+Before you can start chatting, you need to add an OpenAI API key. In the Settings model, add a record with the name `openai_api_key` and the value as your API key.
 
+Now you can access the web client at `http(s)://your.domain` or `http://123.123.123.123` to start chatting.
 
 ## Development
 

components/MsgContent.vue

@@ -1,26 +1,96 @@
 <script setup>
 import { marked } from "marked"
 import hljs from "highlight.js"
+import copy from 'copy-to-clipboard'
+
+// Part of the code comes from this project https://github.com/arronhunt/highlightjs-copy, thanks to the author's contribution
+
+hljs.addPlugin({
+  'after:highlightElement': ({ el, result, text }) => {
+    let header = el.parentElement.querySelector(".hljs-code-header");
+    if (header) {
+      header.remove();
+    }
+
+    header = Object.assign(document.createElement("div"), {
+      className: "hljs-code-header d-flex align-center justify-space-between bg-black pa-1",
+      innerHTML: `<div class="pl-2 text-caption">${result.language}</div>`
+    });
+
+    let copyButton = Object.assign(document.createElement("button"), {
+      innerHTML: "Copy",
+      className: "hljs-copy-button",
+    });
+    copyButton.dataset.copied = false;
+
+    header.append(copyButton);
+    //
+    el.parentElement.classList.add("d-flex","flex-column", "my-3");
+    el.parentElement.prepend(header);
+    copyButton.onclick = function () {
+      copy(text);
+
+      copyButton.innerHTML = "Copied!";
+      copyButton.dataset.copied = 'true';
+
+      setTimeout(() => {
+        copyButton.innerHTML = "Copy";
+        copyButton.dataset.copied = 'false';
+      }, 2000);
+    };
+  }
+});
 
 marked.setOptions({
-  highlight: function (code, lang) {
-    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-    return hljs.highlight(code, { language }).value
-  },
+  // highlight: function (code, lang) {
+  //   const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+  //   return hljs.highlight(code, { language }).value
+  // },
   langPrefix: 'hljs language-', // highlight.js css class prefix
 })
 
 const props = defineProps(['content'])
-const contentHtml = computed(() => {
-  return props.content ? marked(props.content) : ''
+
+const contentHtml = ref('')
+
+const contentElm = ref(null)
+
+const highlightCode = () => {
+  contentElm.value.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightElement(block)
+  })
+}
+
+watchEffect(() => {
+  contentHtml.value = props.content ? marked(props.content) : ''
+  nextTick(() => {
+    highlightCode()
+  })
 })
 
 </script>
 
 <template>
   <div
+      ref="contentElm"
       v-html="contentHtml"
-      class="text-body-1 text-justify"
+      class="chat-msg-content text-justify"
   ></div>
+</template>
 
-</template>
+<style>
+.chat-msg-content ol {
+  list-style-position: inside;
+}
+.hljs-copy-button{
+  width:2rem;height:2rem;text-indent:-9999px;color:#fff;
+  border-radius:.25rem;border:1px solid #ffffff22;
+  background-image:url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
+  background-repeat:no-repeat;background-position:center;
+  transition:background-color 200ms ease,transform 200ms ease-out
+}
+.hljs-copy-button:hover{border-color:#ffffff44}
+.hljs-copy-button:active{border-color:#ffffff66}
+.hljs-copy-button[data-copied="true"]{text-indent:0;width:auto;background-image:none}
+@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}
+</style>

docs/zh/README.md

@@ -0,0 +1,162 @@
+<p align="center">
+  <img alt="demo" src="./demos/demo.png?v=1">
+</p>
+
+[English](./README.md) | [中文](./docs/zh/README.md)
+
+# ChatGPT UI
+
+ChatGPT Web 客户端，支持多用户，支持 Mysql、PostgreSQL 等多种数据库连接进行数据持久化存储，支持多语言。提供 Docker 镜像和快速部署脚本。
+
+## 📢 更新
+
+<details open>
+<summary><strong>2023-03-04</strong></summary>
+
+**使用最新的官方聊天模型**  `gpt-3.5-turbo`
+
+**🎉🎉🎉 提供一个 shell 脚本，用于快速部署到服务器** [使用方法](#one-click-depolyment)
+
+</details>
+
+<details open>
+
+<summary><strong>2023-02-24</strong></summary>
+V2 是一个重要的更新，将后端功能分离为一个独立的项目，托管在 [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server), 该项目使用基于 Python 的 Django 框架。 
+
+如果您仍然希望使用旧版本，请访问 [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1) （不推荐，不再更新）.
+
+</details>
+
+## V2 的功能特性:
+
+- 😉 前后端分离，后端使用基于 Python 的 Django 框架。
+- 😘 用户身份验证，支持多个用户。
+- 😀 能够将数据存储在外部数据库中，支持 Mysql、PostgreSQL 等数据库（默认为 Sqlite）。
+- 😎 持续对话，让AI根据上下文回答问题。
+
+
+## 🚀 一行命令部署到服务器 <a name="one-click-depolyment"></a>
+
+注意：此脚本仅在 Ubuntu Server 22.04 LTS 上验证过。
+
+```bash
+bash <(curl -Ls https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/deployment.sh)
+```
+
+> 如果您拥有一个域名，可以使用 DNS 解析将其指向服务器的 IP 地址。当然，直接使用服务器的 IP 地址也是可以的。
+> 在脚本执行期间，会提示您输入域名。如果您没有域名，可以直接输入服务器的 IP 地址。
+
+### 部署完成之后
+
+访问 `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` 登录管理面板。
+
+默认超级用户: `admin`
+
+默认密码: `password`
+
+在可以开始聊天之前，您需要添加一个 OpenAI 的 API 密钥。在管理面板的设置模型中，添加一个名称为 openai_api_key 的记录，将值设置为您的 API 密钥。
+
+现在可以访问客户端地址 `http(s)://your.domain` / `http://123.123.123.123` 开始聊天。
+
+🎉🎉🎉 享受吧！
+
+## 通过 Docker Compose 快速开始
+
+以下是一个 docker-compose.yml 模板，您可以使用它来快速启动服务。
+
+```yaml
+version: '3'
+services:
+  client:
+    image: wongsaang/chatgpt-ui-client:latest
+    environment:
+      - SERVER_DOMAIN=http://backend-web-server
+    depends_on:
+      - backend-web-server
+    ports:
+      - '80:80'
+    networks:
+      - chatgpt_ui_network
+  backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - APP_DOMAIN=${APP_DOMAIN:-localhost:9000} # CSRF 白名单，在这里设置为 chatgpt-ui-web-server 的地址+端口, 默认： localhost:9000
+      #- DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # 连接外部数据库，如果不设置这个参数，则默认使用内置的 Sqlite。需要注意的是，如果不连接外部数据库，数据将在容器销毁后丢失。链接格式请看下面的 DB_URL 格式对照表
+      #- OPENAI_API_PROXY=https://openai.proxy.com/v1 # https://api.openai.com/v1 的代理地址
+      - DJANGO_SUPERUSER_USERNAME=admin # 默认超级用户
+      - DJANGO_SUPERUSER_PASSWORD=password # 默认超级用户的密码
+      - DJANGO_SUPERUSER_EMAIL=admin@example.com # 默认超级用户邮箱
+      # 如果您想使用电子邮件验证功能，需要配置以下参数：
+    #      - EMAIL_HOST=SMTP server address
+    #      - EMAIL_PORT=SMTP server port
+    #      - EMAIL_HOST_USER=
+    #      - EMAIL_HOST_PASSWORD=
+    #      - EMAIL_USE_TLS=True
+    ports:
+      - '8000:8000'
+    networks:
+      - chatgpt_ui_network
+  backend-web-server:
+    image: wongsaang/chatgpt-ui-web-server:latest
+    environment:
+      - BACKEND_URL=http://backend-wsgi-server:8000
+    ports:
+      - '9000:80'
+    depends_on:
+      - backend-wsgi-server
+    networks:
+      - chatgpt_ui_network
+
+networks:
+  chatgpt_ui_network:
+    driver: bridge
+```
+
+### DB_URL 格式对照表
+
+| 数据库                | 链接                                              |
+|----------------------|--------------------------------------------------|
+| PostgreSQL           | ``postgres://USER:PASSWORD@HOST:PORT/NAME``      |
+| MySQL                | ``mysql://USER:PASSWORD@HOST:PORT/NAME``         |
+| SQLite               | ``sqlite:///PATH``                               |
+
+### 设置 API 密钥
+
+访问 `http(s)://your.domain:9000/admin` / IP `http(s)://123.123.123.123:9000/admin` 登录管理面板。
+
+默认超级用户: `admin`
+
+默认密码: `password`
+
+在可以开始聊天之前，您需要添加一个 OpenAI 的 API 密钥。在管理面板的设置模型中，添加一个名称为 openai_api_key 的记录，将值设置为您的 API 密钥。
+
+现在可以访问客户端地址 `http(s)://your.domain` / `http://123.123.123.123` 开始聊天。
+
+
+## Development
+
+### Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+```
+
+### Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+### Production
+
+Build the application for production:
+
+```bash
+yarn build
+```

lang/en-US.json

@@ -16,6 +16,7 @@
   "followSystem": "Follow system",
   "themeMode": "Theme Mode",
   "feedback": "Feedback",
+  "newConversation": "New conversation",
   "clearConversations": "Clear conversations",
   "roles": {
     "me": "Me",

lang/zh-CN.json

@@ -16,7 +16,8 @@
   "followSystem": "跟随系统",
   "themeMode": "主题模式",
   "feedback": "反馈",
-  "clearConversations": "清除会话",
+  "newConversation": "新的对话",
+  "clearConversations": "清除对话",
   "roles": {
     "me": "我",
     "ai": "AI"

layouts/default.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {useConversions} from "../composables/states";
 import {getConversions} from "../utils/helper";
+import {useDisplay} from "vuetify";
 
 const { $i18n } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
@@ -79,6 +80,12 @@ const loadConversations = async () => {
   loadingConversations.value = false
 }
 
+const {mdAndUp} = useDisplay()
+
+const drawerPermanent = computed(() => {
+  return mdAndUp.value
+})
+
 onNuxtReady(async () => {
   loadConversations()
 })
@@ -91,6 +98,8 @@ onNuxtReady(async () => {
   >
     <v-navigation-drawer
         v-model="drawer"
+        :permanent="drawerPermanent"
+        width="300"
     >
       <div class="px-2 py-2">
         <v-list>
@@ -102,7 +111,7 @@ onNuxtReady(async () => {
                 @click="createNewConversion()"
                 class="text-none"
             >
-              New conversation
+              {{ $t('newConversation') }}
             </v-btn>
           </v-list-item>
           <v-list-item v-show="loadingConversations">
@@ -119,6 +128,7 @@ onNuxtReady(async () => {
           >
             <v-list-item
                 active-color="primary"
+                rounded="xl"
                 v-if="editingConversation && editingConversation.id === conversation.id"
             >
               <v-text-field
@@ -129,6 +139,7 @@ onNuxtReady(async () => {
                   hide-details
                   density="compact"
                   autofocus
+                  @keyup.enter="updateConversation(cIdx)"
                   @click:append="updateConversation(cIdx)"
               ></v-text-field>
             </v-list-item>
@@ -137,28 +148,33 @@ onNuxtReady(async () => {
                 v-slot="{ isHovering, props }"
             >
               <v-list-item
+                  rounded="xl"
                   active-color="primary"
                   @click="openConversationMessages(conversation)"
                   v-bind="props"
               >
                 <v-list-item-title>{{ conversation.topic }}</v-list-item-title>
-                <v-list-item-action v-show="isHovering">
-                  <v-btn
-                      icon="edit"
-                      size="small"
-                      variant="text"
-                      @click="editConversation(cIdx)"
+                <template v-slot:append>
+                  <div
+                      v-show="isHovering"
                   >
-                  </v-btn>
-                  <v-btn
-                      icon="delete"
-                      size="small"
-                      variant="text"
-                      :loading="deletingConversationIndex === cIdx"
-                      @click="deleteConversation(cIdx)"
-                  >
-                  </v-btn>
-                </v-list-item-action>
+                    <v-btn
+                        icon="edit"
+                        size="small"
+                        variant="text"
+                        @click="editConversation(cIdx)"
+                    >
+                    </v-btn>
+                    <v-btn
+                        icon="delete"
+                        size="small"
+                        variant="text"
+                        :loading="deletingConversationIndex === cIdx"
+                        @click="deleteConversation(cIdx)"
+                    >
+                    </v-btn>
+                  </div>
+                </template>
               </v-list-item>
             </v-hover>
           </template>
@@ -173,7 +189,6 @@ onNuxtReady(async () => {
             <v-dialog
                 v-model="clearConfirmDialog"
                 persistent
-                width="auto"
             >
               <template v-slot:activator="{ props }">
                 <v-list-item
@@ -248,7 +263,7 @@ onNuxtReady(async () => {
     </v-navigation-drawer>
 
     <v-app-bar
-        class="d-lg-none"
+        class="d-md-none"
     >
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
@@ -256,24 +271,30 @@ onNuxtReady(async () => {
 
       <v-spacer></v-spacer>
 
-      <v-menu
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-              v-bind="props"
-              icon="help_outline"
-              title="Feedback"
-          ></v-btn>
-        </template>
-        <v-list
-        >
-          <v-list-item
-              @click="feedback"
-          >
-            <v-list-item-title>{{ $t('feedback') }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <v-btn
+          :title="$t('newConversation')"
+          icon="add"
+          @click="createNewConversion()"
+      ></v-btn>
+
+<!--      <v-menu-->
+<!--      >-->
+<!--        <template v-slot:activator="{ props }">-->
+<!--          <v-btn-->
+<!--              v-bind="props"-->
+<!--              icon="help_outline"-->
+<!--              title="Feedback"-->
+<!--          ></v-btn>-->
+<!--        </template>-->
+<!--        <v-list-->
+<!--        >-->
+<!--          <v-list-item-->
+<!--              @click="feedback"-->
+<!--          >-->
+<!--            <v-list-item-title>{{ $t('feedback') }}</v-list-item-title>-->
+<!--          </v-list-item>-->
+<!--        </v-list>-->
+<!--      </v-menu>-->
     </v-app-bar>
 
     <v-main>

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",
     "marked": "^4.2.12",

pages/account/signin.vue

@@ -22,6 +22,7 @@
                     :rules="formRules.username"
                     label="User name"
                     variant="underlined"
+                    clearable
                 ></v-text-field>
                 <v-text-field
                     v-model="formData.password"
@@ -29,6 +30,10 @@
                     label="Password"
                     variant="underlined"
                     @keyup.enter="submit"
+                    clearable
+                    :type="passwordInputType"
+                    :append-inner-icon="passwordInputType === 'password' ? 'visibility' : 'visibility_off'"
+                    @click:append-inner="passwordInputType = passwordInputType === 'password' ? 'text' : 'password'"
                 ></v-text-field>
 
               </v-form>
@@ -83,6 +88,7 @@ const signInForm = ref(null)
 const valid = ref(true)
 const submitting = ref(false)
 const route = useRoute()
+const passwordInputType = ref('password')
 
 const submit = async () => {
   errorMsg.value = null

plugins/vuetify.js

@@ -1,11 +1,13 @@
 import { createVuetify } from 'vuetify'
 import { aliases, md } from 'vuetify/iconsets/md'
 import * as components from 'vuetify/components'
+import { md3 } from 'vuetify/blueprints'
 // import * as directives from 'vuetify/directives'
 
 export default defineNuxtPlugin(nuxtApp => {
     const vuetify = createVuetify({
         ssr: true,
+        blueprint: md3,
         icons: {
             defaultSet: 'md',
             aliases,

yarn.lock

@@ -1682,6 +1682,13 @@ cookie-es@^0.5.0:
   resolved "https://registry.npmmirror.com/cookie-es/-/cookie-es-0.5.0.tgz#a6ad89923e68c542fc9e760b07aefa5ab020d719"
   integrity sha512-RyZrFi6PNpBFbIaQjXDlFIhFVqV42QeKSZX1yQIl6ihImq6vcHNGMtqQ/QzY3RMPuYSkvsRwtnt5M9NeYxKt0g==
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -4224,6 +4231,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"