pref: 优化部份内容

README.md

@@ -1,2 +1,21 @@
 # ChatGPT Bot Web
 
+This is a ChatGPT web application demo with express and vue3
+
+![cover](./docs/cover.png)
+## Intro
+1. `node >= 18`
+1. `pnpm install` node deps
+2. set `OPENAI_API_KEY` in `.env`
+
+## Run
+```shell
+# 1. run service
+pnpm run service
+
+# 2. run web
+pnpm run dev
+```
+
+## License
+MIT © [ChenZhaoYu](./license)

env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

license

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

package.json

@@ -1,41 +1,49 @@
 {
-  "name": "chatgpt-bot",
+	"name": "chatgpt-bot",
-  "version": "1.0.0",
+	"version": "1.0.0",
-  "private": true,
+	"description": "ChatGPT Web Bot",
-  "scripts": {
+	"author": "ChenZhaoYu <chenzhaoyu1994@gami.com>",
-    "dev": "vite",
+	"private": false,
-    "service": "esno ./service/index.ts",
+	"keywords": [
-    "build": "run-p type-check build-only",
+		"chatgpt",
-    "preview": "vite preview",
+		"chatbot",
-    "build-only": "vite build",
+		"web",
-    "type-check": "vue-tsc --noEmit",
+		"vue"
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+	],
-  },
+	"scripts": {
-  "dependencies": {
+		"dev": "vite",
-    "naive-ui": "^2.34.3",
+		"service": "esno ./service/index.ts",
-    "vue": "^3.2.45"
+		"build": "run-p type-check build-only",
-  },
+		"preview": "vite preview",
-  "devDependencies": {
+		"build-only": "vite build",
-    "@antfu/eslint-config": "^0.35.2",
+		"type-check": "vue-tsc --noEmit",
-    "@iconify/vue": "^4.1.0",
+		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
-    "@types/babel__core": "^7.20.0",
+	},
-    "@types/express": "^4.17.17",
+	"dependencies": {
-    "@types/node": "^18.11.12",
+		"naive-ui": "^2.34.3",
-    "@vitejs/plugin-vue": "^4.0.0",
+		"vue": "^3.2.45"
-    "autoprefixer": "^10.4.13",
+	},
-    "axios": "^1.3.2",
+	"devDependencies": {
-    "chatgpt": "^4.2.0",
+		"@antfu/eslint-config": "^0.35.2",
-    "dotenv": "^16.0.3",
+		"@iconify/vue": "^4.1.0",
-    "eslint": "^8.22.0",
+		"@types/babel__core": "^7.20.0",
-    "esno": "^0.16.3",
+		"@types/express": "^4.17.17",
-    "express": "^4.18.2",
+		"@types/node": "^18.11.12",
-    "npm-run-all": "^4.1.5",
+		"@vitejs/plugin-vue": "^4.0.0",
-    "postcss": "^8.4.21",
+		"autoprefixer": "^10.4.13",
-    "prettier": "^2.7.1",
+		"axios": "^1.3.2",
-    "tailwindcss": "^3.2.6",
+		"chatgpt": "^4.2.0",
-    "typescript": "~4.7.4",
+		"dotenv": "^16.0.3",
-    "vite": "^4.0.0",
+		"eslint": "^8.22.0",
-    "vite-plugin-svg-icons": "^2.0.1",
+		"esno": "^0.16.3",
-    "vue-tsc": "^1.0.12"
+		"express": "^4.18.2",
-  }
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.4.21",
+		"prettier": "^2.7.1",
+		"tailwindcss": "^3.2.6",
+		"typescript": "~4.7.4",
+		"vite": "^4.0.0",
+		"vite-plugin-svg-icons": "^2.0.1",
+		"vue-tsc": "^1.0.12"
+	}
 }

src/App.vue

@@ -7,8 +7,18 @@ import Chat from '@/views/Chat/index.vue'
 <template>
   <NConfigProvider class="h-full" preflight-style-disabled>
     <NaiveProvider>
-      <div class="h-full p-4">
+      <div class="flex flex-col h-full p-4">
-        <Chat />
+        <div class="flex-1">
+          <div class="container h-full m-auto">
+            <Chat />
+          </div>
+        </div>
+        <div class="px-4 mt-4 text-sm text-center text-neutral-500">
+          Made By ChenZhaoYu
+          <a href="https://github.com/Chanzhaoyu/chatgpt-bot" target="_blank" class="text-blue-500">
+            Github
+          </a>
+        </div>
       </div>
     </NaiveProvider>
   </NConfigProvider>

src/typings/env.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 interface ImportMetaEnv {
 	/** api url */
 	readonly VITE_GLOB_API_URL: string;

src/views/Chat/index.vue

@@ -74,7 +74,9 @@ function addMessage(message: string, user = false, error = false) {
 <template>
   <div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
     <header class="flex items-center justify-between p-4">
-      <div>会话</div>
+      <h1 class="text-xl font-bold">
+        Chat
+      </h1>
       <div>
         <button
           class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
@@ -103,7 +105,9 @@ function addMessage(message: string, user = false, error = false) {
           @keyup="handleEnter"
         />
         <NButton type="primary" :loading="loading" @click="handleSubmit">
-          <SvgIcon icon="ri:send-plane-fill" />
+          <template #icon>
+            <SvgIcon icon="ri:send-plane-fill" />
+          </template>
         </NButton>
       </div>
     </footer>