Improve drawer width and conversation list style.

Support for the official ChatGPT model: gpt-3.5-turbo

README.md

@@ -1,17 +1,27 @@
 <p align="center">
-  <img alt="demo" src="./demos/demo.gif?v=1">
+  <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.
+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
 
----
+<details open>
+<summary><strong>2023-03-04</strong></summary>
 
+**Update to the latest official chat model**  `gpt-3.5-turbo`
+
+**🎉🎉🎉Provide a shell script that can be used to quickly deploy the service to server** [Quick start](#one-click-depolyment)
+
+</details>
+
+<details open>
+
+<summary><strong>2023-02-24</strong></summary>
 Version 2 is a major update that separates the backend functionality as an independent project, hosted at [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server). 
 
 If you still wish to use the old version, please visit the [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1).
@@ -23,10 +33,35 @@ Version 2 introduces the following new features:
 - 😀 Ability to store data in an external database (defaulting to Sqlite).
 - 😎 Session persistence, allowing the API to answer questions based on your context.
 
+</details>
+
+## 🚀 One-click deployment <a name="one-click-depolyment"></a>
+
+Note: This script has only been tested on Ubuntu Server 22.04 LTS.
+
+```bash
+bash <(curl -Ls https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/deployment.sh)
+```
+
+> If you have a domain name, you can point it to the server's IP address using DNS resolution. Of course, using the server's IP address directly is also possible. 
+> During the script's execution, you will be prompted to enter a domain name. If you do not have a domain name, you can enter the server's IP address directly.
+
+### After the deployment is complete
+
+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 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.
+
+🎉🎉🎉 Enjoy it!
 
 ## Quick start with Docker Compose
 
----
 ### Run services
 
 Below is a docker-compose.yml template:
@@ -37,48 +72,71 @@ services:
   client:
     image: wongsaang/chatgpt-ui-client:latest
     environment:
-      - SERVER_DOMAIN=http://backend:8000
+      - SERVER_DOMAIN=http://backend-web-server
     depends_on:
-      - backend
-    volumes:
-      - backend_static:/app/static
+      - backend-web-server
     ports:
       - '80:80'
     networks:
       - chatgpt_ui_network
-  backend:
-    image: wongsaang/chatgpt-ui-server:latest
+  backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
     environment:
-      #      - 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.
+      - 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/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
-    volumes:
-      - backend_static:/app/static
+      # If you want to use the email verification function, you need to configure the following parameters
+    #      - 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
-
-volumes:
-  backend_static:
 ```
 
-### After running
+### DB_URL schema
 
-After running the services, you can access the web client at http://localhost, and an admin panel at http://localhost/admin.
+| Engine               | URL                                              |
+|----------------------|--------------------------------------------------|
+| PostgreSQL           | ``postgres://USER:PASSWORD@HOST:PORT/NAME``      |
+| MySQL                | ``mysql://USER:PASSWORD@HOST:PORT/NAME``         |
+| SQLite               | ``sqlite:///PATH``                               |
 
-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.
 
+### Set API key
+
+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 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
 
----
-
 ### Setup
 
 Make sure to install the dependencies:

components/MsgContent.vue

@@ -1,25 +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="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>

composables/useAuthFetch.js

@@ -1,18 +1,6 @@
 export const useAuthFetch = async (url, options = {}) => {
     const { $auth } = useNuxtApp()
 
-    const token = await $auth.retrieveToken()
-
-    if (!token) {
-        return await $auth.redirectToLogin()
-    }
-
-    options = Object.assign(options, {
-        headers: {
-            'Authorization': 'Bearer ' + token
-        }
-    })
-
     const res = await useFetch(url, options)
     if (res.error.value && res.error.value.status === 401) {
         await $auth.logout()

deployment.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+
+read -p "Please enter a resolved domain name: " domain
+
+if [[ $(which docker) ]]; then
+    echo "Docker is already installed"
+else
+    echo "Docker is not installed, installing now..."
+
+    sudo apt-get update
+
+    sudo apt-get install -y \
+        ca-certificates \
+        curl \
+        gnupg \
+        lsb-release
+
+    sudo mkdir -m 0755 -p /etc/apt/keyrings
+
+    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+
+    echo \
+        "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
+        $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+    sudo apt-get update
+
+    sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+fi
+if [[ $(which docker-compose) ]]; then
+    echo "Docker Compose is already installed"
+else
+    echo "Docker Compose is not installed, installing now..."
+
+    sudo curl -L "https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+
+    sudo chmod +x /usr/local/bin/docker-compose
+fi
+
+echo "Downloading configuration files..."
+
+sudo curl -L "https://raw.githubusercontent.com/WongSaang/chatgpt-ui/main/docker-compose.yml" -o docker-compose.yml
+
+echo "Starting services..."
+
+sudo APP_DOMAIN="${domain}:9000" docker-compose up -d
+
+echo "Done"

docker-compose.pro.yml

@@ -1,34 +0,0 @@
-version: '3'
-services:
-  client:
-    image: wongsaang/chatgpt-ui-client:latest
-    environment:
-      - SERVER_DOMAIN=http://backend:8000
-    depends_on:
-      - backend
-    volumes:
-      - backend_static:/app/static
-    ports:
-      - '80:80'
-    networks:
-        - chatgpt_ui_network
-  backend:
-    image: wongsaang/chatgpt-ui-server:latest
-    environment:
-#      - 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.
-      - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
-      - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
-      - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
-    volumes:
-      - backend_static:/app/static
-    ports:
-      - '8000:8000'
-    networks:
-      - chatgpt_ui_network
-
-networks:
-  chatgpt_ui_network:
-    driver: bridge
-
-volumes:
-  backend_static:

docker-compose.yml

@@ -1,31 +1,44 @@
 version: '3'
 services:
   client:
-    build:
-      context: .
-      dockerfile: ./Dockerfile
+    image: wongsaang/chatgpt-ui-client:latest
     environment:
-      - SERVER_DOMAIN=http://backend:8000
+      - SERVER_DOMAIN=http://backend-web-server
     depends_on:
-      - backend
-    volumes:
-      - backend_static:/app/static
+      - backend-web-server
     ports:
       - '80:80'
     networks:
-        - chatgpt_ui_network
-  backend:
-    image: 'wongsaang/chatgpt-ui-server:latest'
-    volumes:
-      - backend_static:/app/static
+      - chatgpt_ui_network
+  backend-wsgi-server:
+    image: wongsaang/chatgpt-ui-wsgi-server:latest
+    environment:
+      - APP_DOMAIN=${APP_DOMAIN:-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.
+      - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
+      - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
+      - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
+      # If you want to use the email verification function, you need to configure the following parameters
+#      - 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
-
-volumes:
-  backend_static:
+    driver: bridge

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,8 @@
   "followSystem": "Follow system",
   "themeMode": "Theme Mode",
   "feedback": "Feedback",
+  "newConversation": "New conversation",
+  "clearConversations": "Clear conversations",
   "roles": {
     "me": "Me",
     "ai": "AI"

lang/zh-CN.json

@@ -16,6 +16,8 @@
   "followSystem": "跟随系统",
   "themeMode": "主题模式",
   "feedback": "反馈",
+  "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()
@@ -25,8 +26,68 @@ const setLang = (lang) => {
 
 const conversations = useConversions()
 
-onNuxtReady(async () => {
+const editingConversation = ref(null)
+const deletingConversationIndex = ref(null)
+
+const editConversation = (index) => {
+  editingConversation.value = conversations.value[index]
+}
+
+const updateConversation = async (index) => {
+  editingConversation.value.updating = true
+  const { data, error } = await useAuthFetch(`/api/chat/conversations/${editingConversation.value.id}/`, {
+    method: 'PUT',
+    body: JSON.stringify({
+      topic: editingConversation.value.topic
+    })
+  })
+  if (!error.value) {
+    conversations.value[index] = editingConversation.value
+  }
+  editingConversation.value = null
+}
+
+const deleteConversation = async (index) => {
+  deletingConversationIndex.value = index
+  const { data, error } = await useAuthFetch(`/api/chat/conversations/${conversations.value[index].id}/`, {
+    method: 'DELETE'
+  })
+  deletingConversationIndex.value = null
+  if (!error.value) {
+    conversations.value.splice(index, 1)
+  }
+}
+
+const clearConversations = async () => {
+  deletingConversations.value = true
+  const { data, error } = await useAuthFetch(`/api/chat/conversations/delete_all`, {
+    method: 'DELETE'
+  })
+  if (!error.value) {
+    loadConversations()
+    clearConfirmDialog.value = false
+  }
+  deletingConversations.value = false
+}
+
+const clearConfirmDialog = ref(false)
+const deletingConversations = ref(false)
+const loadingConversations = ref(false)
+
+const loadConversations = async () => {
+  loadingConversations.value = true
   conversations.value = await getConversions()
+  loadingConversations.value = false
+}
+
+const {mdAndUp} = useDisplay()
+
+const drawerPermanent = computed(() => {
+  return mdAndUp.value
+})
+
+onNuxtReady(async () => {
+  loadConversations()
 })
 
 </script>
@@ -37,25 +98,86 @@ onNuxtReady(async () => {
   >
     <v-navigation-drawer
         v-model="drawer"
+        :permanent="drawerPermanent"
+        width="300"
     >
       <div class="px-2 py-2">
-        <v-btn
-            block
-            variant="outlined"
-            prepend-icon="add"
-            size="large"
-            @click="createNewConversion()"
-        >
-          New conversation
-        </v-btn>
         <v-list>
-          <v-list-item
-              v-for="conversation in conversations"
+          <v-list-item>
+            <v-btn
+                block
+                variant="outlined"
+                prepend-icon="add"
+                @click="createNewConversion()"
+                class="text-none"
+            >
+              {{ $t('newConversation') }}
+            </v-btn>
+          </v-list-item>
+          <v-list-item v-show="loadingConversations">
+            <v-list-item-title class="d-flex justify-center">
+              <v-progress-circular indeterminate></v-progress-circular>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+
+        <v-list>
+          <template
+              v-for="(conversation, cIdx) in conversations"
               :key="conversation.id"
-              :title="conversation.topic"
-              active-color="primary"
-              @click="openConversationMessages(conversation)"
-          ></v-list-item>
+          >
+            <v-list-item
+                active-color="primary"
+                rounded="xl"
+                v-if="editingConversation && editingConversation.id === conversation.id"
+            >
+              <v-text-field
+                  v-model="editingConversation.topic"
+                  :loading="editingConversation.updating"
+                  variant="underlined"
+                  append-icon="done"
+                  hide-details
+                  density="compact"
+                  autofocus
+                  @keyup.enter="updateConversation(cIdx)"
+                  @click:append="updateConversation(cIdx)"
+              ></v-text-field>
+            </v-list-item>
+            <v-hover
+                v-if="!editingConversation || editingConversation.id !== conversation.id"
+                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>
+                <template v-slot:append>
+                  <div
+                      v-show="isHovering"
+                  >
+                    <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>
         </v-list>
       </div>
 
@@ -64,6 +186,46 @@ onNuxtReady(async () => {
           <v-divider></v-divider>
           <v-list>
 
+            <v-dialog
+                v-model="clearConfirmDialog"
+                persistent
+            >
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                    v-bind="props"
+                    rounded="xl"
+                    prepend-icon="delete_forever"
+                    :title="$t('clearConversations')"
+                ></v-list-item>
+              </template>
+              <v-card>
+                <v-card-title class="text-h5">
+                  Are you sure you want to delete all conversations?
+                </v-card-title>
+                <v-card-text>This will be a permanent deletion and cannot be retrieved once deleted. Please proceed with caution.</v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn
+                      color="green-darken-1"
+                      variant="text"
+                      @click="clearConfirmDialog = false"
+                      class="text-none"
+                  >
+                    Cancel deletion
+                  </v-btn>
+                  <v-btn
+                      color="green-darken-1"
+                      variant="text"
+                      @click="clearConversations"
+                      class="text-none"
+                      :loading="deletingConversations"
+                  >
+                    Confirm deletion
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
+
             <v-menu
             >
               <template v-slot:activator="{ props }">
@@ -101,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>
 
@@ -109,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>

nginx.conf

@@ -6,18 +6,16 @@ server {
     location / {
         root   /app;
         index  index.html;
+
+        try_files $uri $uri/ /index.html;
     }
 
     location /api/
     {
         proxy_pass ${SERVER_DOMAIN};
         proxy_set_header Host $host;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
-
-    location /admin/ {
-        proxy_pass ${SERVER_DOMAIN};
-        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
 }

nuxt.config.ts

@@ -53,7 +53,8 @@ export default defineNuxtConfig({
         devProxy: {
             "/api": {
                 target: "http://localhost:8000/api",
-                prependPath: true
+                prependPath: true,
+                changeOrigin: true,
             }
 
         }

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/onboarding.vue

@@ -0,0 +1,81 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app',
+  middleware: ['auth']
+})
+const route = useRoute()
+const sending = ref(false)
+const resent = ref(false)
+const errorMsg = ref(null)
+const resendEmail = async () => {
+  errorMsg.value = null
+  sending.value = true
+  const { data, error } = await useFetch('/api/account/registration/resend-email/', {
+    method: 'POST',
+  })
+  if (error.value) {
+    errorMsg.value = 'Something went wrong. Please try again later.'
+  } else {
+    resent.value = true
+  }
+  sending.value = false
+}
+
+onNuxtReady(() => {
+  if (route.query.resend) {
+    resendEmail()
+  }
+})
+</script>
+
+<template>
+  <v-card
+      class="h-100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="8"
+            offset-md="2"
+        >
+          <v-card
+              class="mt-20vh"
+              elevation="0"
+          >
+            <div class="text-center">
+              <h2 class="text-h4">Verify your email</h2>
+              <p class="text-body-2 mt-5">
+                We've sent a verification email to <strong>{{ $auth.user.email }}</strong>. <br>
+                Please check your inbox and click the link to verify your email address.
+              </p>
+              <p v-if="errorMsg"
+                 class="text-red"
+              >{{ errorMsg }}</p>
+              <v-btn
+                  variant="text"
+                  class="mt-5"
+                  color="primary"
+                  :loading="sending"
+                  @click="resendEmail"
+                  :disabled="resent"
+              >
+                {{ resent ? 'Resent' : 'Resend email'}}
+              </v-btn>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<style scoped>
+.h-100vh {
+  height: 100vh;
+}
+.mt-20vh {
+  margin-top: 20vh;
+}
+</style>

pages/account/signin.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-card
+      style="height: 100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="6"
+            offset-md="3"
+        >
+          <v-card
+              class="mt-15"
+              elevation="0"
+          >
+            <div class="text-center text-h4">Sign in</div>
+            <v-card-text>
+              <v-form ref="signInForm">
+                <v-text-field
+                    v-model="formData.username"
+                    :rules="formRules.username"
+                    label="User name"
+                    variant="underlined"
+                    clearable
+                ></v-text-field>
+                <v-text-field
+                    v-model="formData.password"
+                    :rules="formRules.password"
+                    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>
+
+              <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
+
+              <div
+                class="mt-5 d-flex justify-space-between"
+              >
+                <v-btn
+                    @click="navigateTo('/account/signup')"
+                    variant="text"
+                    color="primary"
+                >Create account</v-btn>
+
+                <v-btn
+                    color="primary"
+                    :loading="submitting"
+                    @click="submit"
+                    size="large"
+                >Submit</v-btn>
+              </div>
+
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app'
+})
+const formData = ref({
+  username: '',
+  password: ''
+})
+const formRules = ref({
+  username: [
+      v => !!v || 'Username is required'
+  ],
+  password: [
+      v => !!v || 'Password is required'
+  ]
+})
+const { $auth } = useNuxtApp()
+const errorMsg = ref(null)
+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
+  const { valid } = await signInForm.value.validate()
+  if (valid) {
+    submitting.value = true
+    const { data, error } = await useFetch('/api/account/login/', {
+      method: 'POST',
+      body: JSON.stringify(formData.value)
+    })
+    if (error.value) {
+      if (error.value.status === 400) {
+        if (error.value.data.non_field_errors) {
+          errorMsg.value = error.value.data.non_field_errors[0]
+        }
+      } else {
+        errorMsg.value = 'Something went wrong. Please try again.'
+      }
+    } else {
+      $auth.setUser(data.value.user)
+      navigateTo(route.query.callback || '/')
+    }
+    submitting.value = false
+  }
+}
+
+</script>

pages/account/signup.vue

@@ -0,0 +1,172 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app'
+})
+
+const { $auth } = useNuxtApp()
+
+const formData = ref({
+  username: '',
+  email: '',
+  password1: '',
+  password2: '',
+})
+
+const fieldErrors = ref({
+  username: '',
+  email: '',
+  password1: '',
+  password2: '',
+})
+
+const formRules = ref({
+  username: [
+    v => !!v || 'Please enter your username',
+    v => v.length >= 4 || 'Username must be at least 4 characters'
+  ],
+  email: [
+    v => !!v || 'Please enter your e-mail address',
+    v => /.+@.+\..+/.test(v) || 'E-mail address must be valid'
+  ],
+  password1: [
+    v => !!v || 'Please enter your password',
+    v => v.length >= 8 || 'Password must be at least 8 characters'
+  ],
+  password2: [
+    v => !!v || 'Please confirm your password',
+    v => v.length >= 8 || 'Password must be at least 8 characters',
+    v => v === formData.value.password1 || 'Confirm password must match password'
+  ]
+})
+
+const submitting = ref(false)
+const errorMsg = ref(null)
+const signUpForm = ref(null)
+
+const submit = async () => {
+  errorMsg.value = null
+  const { valid } = await signUpForm.value.validate()
+  if (valid) {
+    submitting.value = true
+
+    const { data, error } = await useFetch('/api/account/registration/', {
+      method: 'POST',
+      body: JSON.stringify(formData.value)
+    })
+
+    console.log(error.value)
+
+    if (error.value) {
+      if (error.value.status === 400) {
+        for (const key in formData.value) {
+          if (error.value.data[key]) {
+            fieldErrors.value[key] = error.value.data[key][0]
+          }
+        }
+        if (error.value.data.non_field_errors) {
+          errorMsg.value = error.value.data.non_field_errors[0]
+        }
+      } else {
+        errorMsg.value = 'Something went wrong. Please try again.'
+      }
+    } else {
+      $auth.setUser(data.value.user)
+      navigateTo('/account/onboarding')
+    }
+
+    submitting.value = false
+  }
+}
+
+const handleFieldUpdate = (field) => {
+  // fieldErrors.value[field] = ''
+}
+</script>
+
+<template>
+  <v-card
+      style="height: 100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="6"
+            offset-md="3"
+        >
+          <v-card
+              class="mt-15"
+              elevation="0"
+          >
+            <div class="text-center text-h4">Create your account</div>
+            <v-card-text>
+              <v-form ref="signUpForm" class="mt-5">
+                <v-text-field
+                    v-model="formData.username"
+                    :rules="formRules.username"
+                    :error-messages="fieldErrors.username"
+                    label="User name"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('username')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.email"
+                    :rules="formRules.email"
+                    :error-messages="fieldErrors.email"
+                    label="Email"
+                    variant="underlined"
+                    @@update:modelValue="handleFieldUpdate('email')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.password1"
+                    :rules="formRules.password1"
+                    :error-messages="fieldErrors.password1"
+                    label="Password"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('password1')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.password2"
+                    :rules="formRules.password2"
+                    :error-messages="fieldErrors.password2"
+                    label="Confirm password"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('password2')"
+                    clearable
+                ></v-text-field>
+
+              </v-form>
+
+              <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
+
+              <div
+                  class="mt-5 d-flex justify-space-between"
+              >
+                <v-btn
+                    @click="navigateTo('/account/signin')"
+                    variant="text"
+                    color="primary"
+                >Sign in instead</v-btn>
+
+                <v-btn
+                    size="large"
+                    color="primary"
+                    :loading="submitting"
+                    @click="submit"
+                >Submit</v-btn>
+              </div>
+
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>

pages/account/verify-email.vue

@@ -0,0 +1,100 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app',
+  path: '/account/verify-email/:token',
+  title: 'Verify Email'
+})
+const route = useRoute()
+const verifying = ref(false)
+const status = ref('')
+
+const verifyEmail = async () => {
+  verifying.value = true
+  const { data, error } = await useFetch(`/api/account/registration/verify-email/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      key: route.params.token
+    })
+  })
+  if (!error.value && data.value.detail === 'ok') {
+    status.value = 'success'
+  } else {
+    status.value = 'error'
+  }
+  verifying.value = false
+}
+
+onNuxtReady(() => {
+  verifyEmail()
+})
+</script>
+
+<template>
+  <v-container class="h-100vh">
+    <v-row
+        class="fill-height"
+        align-content="center"
+        justify="center"
+    >
+      <v-col
+          class="text-subtitle-1 text-center"
+          cols="12"
+          v-if="verifying"
+      >
+        Verifying your email
+      </v-col>
+      <v-col
+          cols="6"
+          v-if="verifying"
+      >
+        <v-progress-linear
+            color="deep-purple-accent-4"
+            indeterminate
+            rounded
+            height="6"
+        ></v-progress-linear>
+      </v-col>
+      <v-col
+          cols="12"
+          v-if="status === 'success'"
+          class="text-center"
+      >
+        <h2 class="text-h4">
+          Your email has been verified.
+        </h2>
+        <p class="text-subtitle-1">
+          You can now sign in to your account.
+        </p>
+        <v-btn
+            color="primary"
+            variant="text"
+            @click="navigateTo('/account/login')"
+        >
+          Sign in
+        </v-btn>
+      </v-col>
+      <v-col
+          cols="12"
+          v-if="status === 'error'"
+          class="text-center"
+      >
+        <h2 class="text-h4">
+          There was an error verifying your email.
+        </h2>
+        <v-btn
+            color="primary"
+            variant="text"
+            @click="navigateTo('/account/onboarding?resend=1')"
+        >
+          Resend email
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.h-100vh {
+  height: 100vh;
+}
+</style>

pages/index.vue

@@ -3,6 +3,7 @@ definePageMeta({
   middleware: ["auth"]
 })
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
+import { nextTick } from 'vue'
 
 const { $i18n, $auth } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
@@ -18,16 +19,14 @@ const abortFetch = () => {
   fetchingResponse.value = false
 }
 const fetchReply = async (message, parentMessageId) => {
-  const token = await $auth.retrieveToken()
   ctrl = new AbortController()
   try {
-    await fetchEventSource('/api/conversation', {
+    await fetchEventSource('/api/conversation/', {
       signal: ctrl.signal,
       method: 'POST',
       headers: {
         'accept': 'application/json',
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`
       },
       body: JSON.stringify({
         model: currentModel.value,
@@ -51,7 +50,7 @@ const fetchReply = async (message, parentMessageId) => {
       onerror(err) {
         throw err;
       },
-      onmessage(message) {
+      async onmessage(message) {
         // console.log(message)
         const event = message.event
         const data = JSON.parse(message.data)
@@ -121,6 +120,7 @@ const showSnackbar = (text) => {
   snackbar.value = true
 }
 
+
 </script>
 
 <template>
@@ -128,21 +128,41 @@ const showSnackbar = (text) => {
       v-if="currentConversation.messages.length > 0"
       ref="chatWindow"
   >
-    <v-card
-        rounded="0"
-        elevation="0"
-        v-for="(conversation, index) in currentConversation.messages"
-        :key="index"
-        :variant="conversation.is_bot ? 'tonal' : 'text'"
-    >
-      <v-container>
-        <v-card-text class="text-caption text-disabled">{{ $t(`roles.${conversation.is_bot?'ai':'me'}`) }}</v-card-text>
-        <v-card-text>
-          <MsgContent :content="conversation.message" />
-        </v-card-text>
-      </v-container>
-      <v-divider></v-divider>
-    </v-card>
+    <v-container>
+      <v-row>
+        <v-col
+            v-for="(message, index) in currentConversation.messages" :key="index"
+            cols="12"
+        >
+          <div
+              class="d-flex"
+              :class="message.is_bot ? 'justify-start mr-16' : 'justify-end ml-16'"
+          >
+            <v-card
+                :color="message.is_bot ? '' : 'primary'"
+                rounded="lg"
+                elevation="2"
+            >
+              <v-card-text>
+                <MsgContent :content="message.message" />
+              </v-card-text>
+
+<!--              <v-card-actions-->
+<!--                  v-if="message.is_bot"-->
+<!--              >-->
+<!--                <v-spacer></v-spacer>-->
+<!--                <v-tooltip text="Copy">-->
+<!--                  <template v-slot:activator="{ props }">-->
+<!--                    <v-btn v-bind="props" icon="content_copy"></v-btn>-->
+<!--                  </template>-->
+<!--                </v-tooltip>-->
+<!--              </v-card-actions>-->
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+
     <div ref="grab" class="w-100" style="height: 200px;"></div>
   </div>
   <Welcome v-else />

pages/login.vue

@@ -1,87 +0,0 @@
-<template>
-  <v-card
-      color="red-lighten-5"
-      style="height: 100vh"
-  >
-    <v-container>
-      <v-row>
-        <v-col
-            sm="9"
-            offset-sm="1"
-            md="8"
-            offset-md="2"
-        >
-          <v-card
-              class="mt-15"
-          >
-            <v-card-title>Sign in</v-card-title>
-            <v-card-text>
-              <v-form ref="signInForm">
-                <v-text-field
-                    v-model="formData.username"
-                    :rules="formRules.username"
-                    label="User name"
-                    variant="underlined"
-                ></v-text-field>
-                <v-text-field
-                    v-model="formData.password"
-                    :rules="formRules.password"
-                    label="Password"
-                    variant="underlined"
-                ></v-text-field>
-                <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn
-                      variant="elevated"
-                      color="primary"
-                      :loading="submitting"
-                      @click="submit"
-                  >Submit</v-btn>
-                </v-card-actions>
-              </v-form>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-
-</template>
-
-<script setup>
-definePageMeta({
-  layout: 'vuetify-app'
-})
-const formData = ref({
-  username: '',
-  password: ''
-})
-const formRules = ref({
-  username: [
-      v => !!v || 'Username is required'
-  ],
-  password: [
-      v => !!v || 'Password is required'
-  ]
-})
-const { $auth } = useNuxtApp()
-const errorMsg = ref(null)
-const signInForm = ref(null)
-const valid = ref(true)
-const submitting = ref(false)
-const submit = async () => {
-  errorMsg.value = null
-  const { valid } = await signInForm.value.validate()
-  if (valid) {
-    submitting.value = true
-    const error = await $auth.login(formData.value.username, formData.value.password)
-    submitting.value = false
-    if (!error) {
-      return await $auth.callback()
-    }
-    errorMsg.value = error
-  }
-}
-
-</script>

plugins/auth.js

@@ -1,40 +1,20 @@
 
 const AUTH_ROUTE = {
     home: '/',
-    login: '/login'
-}
-
-const COOKIE_OPTIONS = {
-    prefix: '_Secure-auth',
-    path: '/',
-    tokenName: 'access-token',
-    refreshTokenName: 'refresh-token',
+    login: '/account/signin',
 }
 
 const ENDPOINTS = {
     login: {
-        url: '/api/auth/signin'
-    },
-    refresh: {
-        url: '/api/auth/token/refresh'
+        url: '/api/account/login/'
     },
     user: {
-        url: '/api/auth/session'
+        url: '/api/account/user/'
     }
 }
 
 
 export default defineNuxtPlugin(() => {
-    const tokenKey = COOKIE_OPTIONS.prefix + '.' + COOKIE_OPTIONS.tokenName
-    const refreshTokenKey = COOKIE_OPTIONS.prefix + '.' + COOKIE_OPTIONS.refreshTokenName
-    const tokenOptions = {
-        maxAge: 60 * 5,
-    }
-    const refreshTokenOptions = {
-        maxAge: 60 * 60 * 24,
-    }
-    const token = useCookie(tokenKey, tokenOptions)
-    const refreshToken = useCookie(refreshTokenKey, refreshTokenOptions)
 
     class Auth {
         constructor() {
@@ -42,73 +22,32 @@ export default defineNuxtPlugin(() => {
             this.user = useState('user')
         }
 
-        async login (username, password) {
-            const { data, error } = await useFetch(ENDPOINTS.login.url, {
-                method: 'POST',
-                body: {
-                    username,
-                    password
-                }
-            })
-            if (!error.value) {
-                token.value = data.value.access
-                refreshToken.value = data.value.refresh
-                return null
-            }
-            if (error.value.status === 401) {
-                return error.value.data.detail
-            }
-            return 'Request failed, please try again.'
-        }
-
         async logout () {
             this.loginIn.value = false
             this.user.value = null
             await this.redirectToLogin()
         }
 
+        setUser (user) {
+            this.user = user
+            this.loginIn.value = true
+        }
+
         async fetchUser () {
-            const { data, error } = await useAuthFetch(ENDPOINTS.user.url)
+            const { data, error } = await useFetch(ENDPOINTS.user.url, {
+                // withCredentials: true
+            })
             if (!error.value) {
-                this.user = data.value
-                this.loginIn.value = true
+                this.setUser(data.value)
                 return null
             }
             return error
         }
 
-        async refresh () {
-            const { data, error } = await useFetch(ENDPOINTS.refresh.url, {
-                method: 'POST',
-                body: {
-                    'refresh': refreshToken.value
-                }
-            })
-            if (!error.value) {
-                token.value = data.value.access
-                return data.value.access
-            }
-            return null
-        }
-
-        async callback () {
-            return await navigateTo(AUTH_ROUTE.home)
-        }
-
-        async redirectToLogin () {
-            return await navigateTo(AUTH_ROUTE.login)
-        }
-
-        async retrieveToken () {
-            const token = useCookie(tokenKey, tokenOptions)
-            const refreshToken = useCookie(refreshTokenKey, refreshTokenOptions)
-            if (!refreshToken.value) {
-                return null
-            }
-            if (!token.value) {
-                return await this.refresh()
-            }
-            return token.value
+        async redirectToLogin (callback) {
+            return await navigateTo(
+                AUTH_ROUTE.login + '?callback=' + encodeURIComponent(callback || AUTH_ROUTE.home)
+            )
         }
 
     }
@@ -117,13 +56,9 @@ export default defineNuxtPlugin(() => {
 
     addRouteMiddleware('auth', async (to, from) => {
         if (!auth.loginIn.value) {
-            const token = await auth.retrieveToken()
-            if (!token) {
-                return await auth.redirectToLogin()
-            }
             const error = await auth.fetchUser()
             if (error) {
-                return await auth.redirectToLogin()
+                return await auth.redirectToLogin(to.fullPath)
             }
         }
     })

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,

utils/helper.js

@@ -9,7 +9,7 @@ export const getDefaultConversionData = () => {
 }
 
 export const getConversions = async () => {
-    const { data, error } = await useAuthFetch('/api/chat/conversations')
+    const { data, error } = await useAuthFetch('/api/chat/conversations/')
     if (!error.value) {
         return data.value
     }
@@ -33,7 +33,7 @@ export const openConversationMessages = async (currentConversation) => {
 }
 
 export const genTitle = async (conversationId) => {
-    const { data, error } = await useAuthFetch('/api/gen_title', {
+    const { data, error } = await useAuthFetch('/api/gen_title/', {
         method: 'POST',
         body: {
             conversationId: conversationId

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"