Redon
2 years ago
committed by
GitHub
commit
361494d444
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": ["@commitlint/config-conventional"]
|
||||
}
|
||||
@ -1,5 +1,2 @@
|
||||
# OpenAI API Key
|
||||
OPENAI_API_KEY='xxxx'
|
||||
|
||||
# Glob API URL
|
||||
VITE_GLOB_API_URL='http://localhost:3002'
|
||||
|
||||
@ -1 +0,0 @@
|
||||
components.d.ts
|
||||
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
pnpm exec commitlint --config .commitlintrc.json --edit "${1}"
|
||||
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
pnpm exec lint-staged
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
# ChatGPT Web Bot
|
||||
|
||||
[中文](./README.md) | English
|
||||
|
||||
ChartGPT demo page built with express and vue3
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
> Make sure `node >= 18`
|
||||
|
||||
If pnpm is not installed
|
||||
```shell
|
||||
npm install pnpm -g
|
||||
```
|
||||
|
||||
install node deps
|
||||
```shell
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Sign up for an [OpenAI API key](https://platform.openai.com/overview) and store it in your environment.
|
||||
|
||||
```
|
||||
# .env
|
||||
OPENAI_API_KEY="Your Key"
|
||||
```
|
||||
|
||||
Run service
|
||||
```shell
|
||||
pnpm run service
|
||||
```
|
||||
|
||||
Run web
|
||||
```shell
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
## License
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 200 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,2 @@
|
||||
# OpenAI API Key
|
||||
OPENAI_API_KEY=
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"root": true,
|
||||
"extends": ["@antfu"]
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["dbaeumer.vscode-eslint"]
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
{
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"typescript",
|
||||
"json",
|
||||
"jsonc",
|
||||
"json5",
|
||||
"yaml"
|
||||
],
|
||||
"cSpell.words": [
|
||||
"antfu",
|
||||
"chatgpt",
|
||||
"esno",
|
||||
"GPTAPI",
|
||||
"OPENAI"
|
||||
]
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
import dotenv from 'dotenv'
|
||||
import { ChatGPTAPI } from 'chatgpt'
|
||||
|
||||
interface ChatContext {
|
||||
conversationId?: string
|
||||
parentMessageId?: string
|
||||
}
|
||||
|
||||
dotenv.config()
|
||||
|
||||
const apiKey = process.env.OPENAI_API_KEY
|
||||
|
||||
if (apiKey === undefined)
|
||||
throw new Error('OPENAI_API_KEY is not defined')
|
||||
|
||||
const chatContext = new Set<ChatContext>()
|
||||
|
||||
/**
|
||||
* More Info: https://github.com/transitive-bullshit/chatgpt-api
|
||||
*/
|
||||
const api = new ChatGPTAPI({ apiKey })
|
||||
|
||||
async function chatReply(message: string) {
|
||||
if (!message)
|
||||
return
|
||||
|
||||
// Get the last context from the chat context
|
||||
// If there is a last context, add it to the options
|
||||
let options = {}
|
||||
const lastContext = Array.from(chatContext).pop()
|
||||
if (lastContext) {
|
||||
const { conversationId, parentMessageId } = lastContext
|
||||
options = { conversationId, parentMessageId }
|
||||
}
|
||||
|
||||
// Send the message to the API
|
||||
const response = await api.sendMessage(message, { ...options })
|
||||
|
||||
const { conversationId, id } = response
|
||||
|
||||
// Add the new context to the chat context
|
||||
if (conversationId && id)
|
||||
chatContext.add({ conversationId, parentMessageId: id })
|
||||
|
||||
return response
|
||||
}
|
||||
|
||||
async function clearChatContext() {
|
||||
// Clear the chat context
|
||||
chatContext.clear()
|
||||
return Promise.resolve({ message: 'Chat context cleared' })
|
||||
}
|
||||
|
||||
export { chatReply, clearChatContext }
|
||||
@ -1,26 +0,0 @@
|
||||
import express from 'express'
|
||||
import { chatReply, clearChatContext } from './chatgpt'
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
|
||||
app.all('*', (req, res, next) => {
|
||||
res.header('Access-Control-Allow-Origin', '*')
|
||||
res.header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
res.header('Access-Control-Allow-Methods', '*')
|
||||
next()
|
||||
})
|
||||
|
||||
app.listen(3002, () => globalThis.console.log('Server is running on port 3002'))
|
||||
|
||||
app.post('/chat', async (req, res) => {
|
||||
const { message } = req.body
|
||||
const response = await chatReply(message)
|
||||
res.send(response)
|
||||
})
|
||||
|
||||
app.post('/clear', async (req, res) => {
|
||||
const response = await clearChatContext()
|
||||
res.send(response)
|
||||
})
|
||||
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "chatgpt-web-service",
|
||||
"version": "1.0.0",
|
||||
"private": false,
|
||||
"description": "ChatGPT Web Bot node service",
|
||||
"keywords": [
|
||||
"chatgpt",
|
||||
"chatbot",
|
||||
"web",
|
||||
"vue"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "esno ./src/index.ts",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"chatgpt": "^4.2.0",
|
||||
"express": "^4.18.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^0.35.2",
|
||||
"@types/express": "^4.17.17",
|
||||
"@types/node": "^18.13.0",
|
||||
"dotenv": "^16.0.3",
|
||||
"eslint": "^8.34.0",
|
||||
"esno": "^0.16.3",
|
||||
"typescript": "^4.9.5"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,81 @@
|
||||
import * as dotenv from 'dotenv'
|
||||
import type { SendMessageOptions } from 'chatgpt'
|
||||
import { ChatGPTAPI } from 'chatgpt'
|
||||
import { sendResponse } from './utils'
|
||||
|
||||
export interface ChatContext {
|
||||
conversationId?: string
|
||||
parentMessageId?: string
|
||||
}
|
||||
|
||||
dotenv.config()
|
||||
|
||||
const apiKey = process.env.OPENAI_API_KEY
|
||||
|
||||
if (apiKey === undefined)
|
||||
throw new Error('OPENAI_API_KEY is not defined')
|
||||
|
||||
const chatContext = new Set<ChatContext>()
|
||||
|
||||
/**
|
||||
* More Info: https://github.com/transitive-bullshit/chatgpt-api
|
||||
*/
|
||||
const api = new ChatGPTAPI({ apiKey })
|
||||
|
||||
async function chatReply(message: string) {
|
||||
if (!message)
|
||||
return sendResponse({ type: 'Fail', message: 'Message is empty' })
|
||||
|
||||
try {
|
||||
// Get the last context from the chat context
|
||||
let options: SendMessageOptions = {}
|
||||
|
||||
const lastContext = Array.from(chatContext).pop()
|
||||
|
||||
if (lastContext)
|
||||
options = { ...lastContext }
|
||||
|
||||
const response = await api.sendMessage(message, { ...options })
|
||||
|
||||
const { conversationId, id } = response
|
||||
|
||||
// Add the new context to the chat context
|
||||
if (conversationId && id)
|
||||
chatContext.add({ conversationId, parentMessageId: id })
|
||||
|
||||
return sendResponse({ type: 'Success', data: response })
|
||||
}
|
||||
catch (error: any) {
|
||||
global.console.log(error)
|
||||
return sendResponse({ type: 'Fail', message: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
async function chatReplayOne(message: string, options?: ChatContext) {
|
||||
if (!message)
|
||||
return sendResponse({ type: 'Fail', message: 'Message is empty' })
|
||||
|
||||
try {
|
||||
let messageOptions: SendMessageOptions = {}
|
||||
|
||||
if (options) {
|
||||
const { conversationId, parentMessageId } = options
|
||||
messageOptions = { conversationId, parentMessageId }
|
||||
|
||||
const response = await api.sendMessage(message, { ...messageOptions })
|
||||
|
||||
return sendResponse({ type: 'Success', data: response })
|
||||
}
|
||||
}
|
||||
catch (error: any) {
|
||||
return sendResponse({ type: 'Fail', message: error.message })
|
||||
}
|
||||
}
|
||||
|
||||
async function clearChatContext() {
|
||||
// Clear the chat context
|
||||
chatContext.clear()
|
||||
return sendResponse({ type: 'Success', message: 'Chat context cleared' })
|
||||
}
|
||||
|
||||
export { chatReply, chatReplayOne, clearChatContext }
|
||||
@ -0,0 +1,43 @@
|
||||
import express from 'express'
|
||||
import type { ChatContext } from './chatgpt'
|
||||
import { chatReplayOne, chatReply, clearChatContext } from './chatgpt'
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
|
||||
app.all('*', (req, res, next) => {
|
||||
res.header('Access-Control-Allow-Origin', '*')
|
||||
res.header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
res.header('Access-Control-Allow-Methods', '*')
|
||||
next()
|
||||
})
|
||||
|
||||
app.listen(3002, () => globalThis.console.log('Server is running on port 3002'))
|
||||
|
||||
app.post('/chat', async (req, res) => {
|
||||
try {
|
||||
const { prompt } = req.body as { prompt: string }
|
||||
const response = await chatReply(prompt)
|
||||
res.send(response)
|
||||
}
|
||||
catch (error) {
|
||||
res.send(error)
|
||||
}
|
||||
})
|
||||
|
||||
app.post('./chatOne', async (req, res) => {
|
||||
try {
|
||||
const { prompt, options = {} } = req.body as { prompt: string; options?: ChatContext }
|
||||
const response = await chatReplayOne(prompt, options)
|
||||
res.send(response)
|
||||
}
|
||||
catch (error) {
|
||||
res.send(error)
|
||||
}
|
||||
})
|
||||
|
||||
app.post('/clear', async (req, res) => {
|
||||
const response = await clearChatContext()
|
||||
res.send(response)
|
||||
})
|
||||
@ -0,0 +1,22 @@
|
||||
interface SendResponseOptions {
|
||||
type: 'Success' | 'Fail'
|
||||
message?: string
|
||||
data?: any
|
||||
}
|
||||
|
||||
export function sendResponse(options: SendResponseOptions) {
|
||||
if (options.type === 'Success') {
|
||||
return Promise.resolve({
|
||||
message: options.message ?? null,
|
||||
data: options.data ?? null,
|
||||
status: options.type,
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line prefer-promise-reject-errors
|
||||
return Promise.reject({
|
||||
message: options.message ?? 'Failed',
|
||||
data: options.data ?? null,
|
||||
status: options.type,
|
||||
})
|
||||
}
|
||||
@ -1,13 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { GithubSite, NaiveProvider } from '@/components'
|
||||
import Chat from '@/views/Chat/index.vue'
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { NaiveProvider } from '@/components/common'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider class="h-full">
|
||||
<NaiveProvider>
|
||||
<div class="h-full overflow-hidden pb-[50px] p-4">
|
||||
<Chat />
|
||||
<GithubSite />
|
||||
</div>
|
||||
<RouterView />
|
||||
</NaiveProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
import { post } from '@/utils/request'
|
||||
|
||||
export function fetchChatAPI<T = any>(prompt: string) {
|
||||
return post<T>({
|
||||
url: '/chat',
|
||||
data: { prompt },
|
||||
})
|
||||
}
|
||||
|
||||
export function clearConversations<T = any>() {
|
||||
return post<T>({
|
||||
url: '/clear',
|
||||
})
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, h } from 'vue'
|
||||
import { NConfigProvider, NMessageProvider, useMessage } from 'naive-ui'
|
||||
|
||||
function registerNaiveTools() {
|
||||
window.$message = useMessage()
|
||||
}
|
||||
|
||||
const NaiveProviderContent = defineComponent({
|
||||
name: 'NaiveProviderContent',
|
||||
setup() {
|
||||
registerNaiveTools()
|
||||
},
|
||||
render() {
|
||||
return h('div')
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider class="h-full">
|
||||
<NMessageProvider>
|
||||
<slot />
|
||||
<NaiveProviderContent />
|
||||
</NMessageProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
@ -0,0 +1,52 @@
|
||||
<script setup lang='ts'>
|
||||
import { SvgIcon } from '@/components/common'
|
||||
|
||||
interface Props {
|
||||
text: string
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: 'click',): void
|
||||
(e: 'edit',): void
|
||||
(e: 'delete',): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
function handleClick(event: Event) {
|
||||
emit('click')
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
emit('edit')
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
emit('delete')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
|
||||
@click="handleClick"
|
||||
>
|
||||
<span>
|
||||
<SvgIcon icon="ri:message-3-line" />
|
||||
</span>
|
||||
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
<div class="absolute z-10 flex visible right-1">
|
||||
<button class="p-1" @click="handleEdit">
|
||||
<SvgIcon icon="ri:edit-line" />
|
||||
</button>
|
||||
<button class="p-1" @click="handleDelete">
|
||||
<SvgIcon icon="ri:delete-bin-line" />
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
reversal?: boolean
|
||||
error?: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
|
||||
<span class="leading-relaxed whitespace-pre-wrap" :class="[{ 'text-red-400': error }]">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,4 @@
|
||||
import Message from './Message/index.vue'
|
||||
import ListItem from './ListItem/index.vue'
|
||||
|
||||
export { Message, ListItem }
|
||||
@ -0,0 +1,116 @@
|
||||
<script setup lang='ts'>
|
||||
import { nextTick, onMounted, ref } from 'vue'
|
||||
import { NButton, NInput, useMessage } from 'naive-ui'
|
||||
import { Message } from './components'
|
||||
import { Layout } from './layout'
|
||||
import { clearConversations, fetchChatAPI } from '@/api'
|
||||
import { HoverButton, SvgIcon } from '@/components/common'
|
||||
|
||||
interface ListProps {
|
||||
dateTime: string
|
||||
message: string
|
||||
reversal?: boolean
|
||||
error?: boolean
|
||||
}
|
||||
|
||||
const scrollRef = ref<HTMLDivElement>()
|
||||
|
||||
const ms = useMessage()
|
||||
|
||||
const prompt = ref('')
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const list = ref<ListProps[]>([])
|
||||
|
||||
onMounted(initChat)
|
||||
|
||||
function initChat() {
|
||||
addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.', false)
|
||||
}
|
||||
|
||||
async function handleClear() {
|
||||
try {
|
||||
const { message } = await clearConversations()
|
||||
ms.success(message ?? 'Success')
|
||||
}
|
||||
catch (error) {
|
||||
ms.error('Clear failed, please try again later.')
|
||||
list.value = []
|
||||
setTimeout(initChat, 100)
|
||||
}
|
||||
}
|
||||
|
||||
function handleEnter(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter')
|
||||
handleSubmit()
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (loading.value)
|
||||
return
|
||||
|
||||
const message = prompt.value.trim()
|
||||
|
||||
if (!message || !message.length) {
|
||||
ms.warning('Please enter a message')
|
||||
return
|
||||
}
|
||||
|
||||
addMessage(message, true)
|
||||
prompt.value = ''
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const { data } = await fetchChatAPI(message)
|
||||
addMessage(data?.text ?? '', false)
|
||||
}
|
||||
catch (error: any) {
|
||||
addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, false, true)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(message: string, reversal = false, error = false) {
|
||||
list.value.push({ dateTime: new Date().toLocaleString(), message, reversal, error })
|
||||
nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="flex flex-col h-full">
|
||||
<main class="flex-1 overflow-hidden">
|
||||
<div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
|
||||
<div>
|
||||
<Message
|
||||
v-for="(item, index) of list"
|
||||
:key="index"
|
||||
:date-time="item.dateTime"
|
||||
:message="item.message"
|
||||
:reversal="item.reversal"
|
||||
:error="item.error"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="p-4">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<HoverButton tooltip="Clear conversations" @click="handleClear">
|
||||
<span class="text-xl text-[#4f555e]">
|
||||
<SvgIcon icon="ri:delete-bin-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
<NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
|
||||
<NButton type="primary" :loading="loading" @click="handleSubmit">
|
||||
<template #icon>
|
||||
<SvgIcon icon="ri:send-plane-fill" />
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
@ -0,0 +1,19 @@
|
||||
<script setup lang='ts'>
|
||||
import { NLayout, NLayoutContent } from 'naive-ui'
|
||||
import Sider from './sider/index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full overflow-hidden border rounded-md shadow-md min-w-[640px]">
|
||||
<NLayout class="h-full" has-sider>
|
||||
<Sider />
|
||||
<NLayoutContent class="h-full">
|
||||
<slot />
|
||||
</NLayoutContent>
|
||||
</NLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export { Layout }
|
||||
@ -0,0 +1,15 @@
|
||||
<script setup lang='ts'>
|
||||
import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="flex items-center justify-between p-4 overflow-hidden border-t">
|
||||
<UserAvatar />
|
||||
|
||||
<HoverButton tooltip="Setting">
|
||||
<span class="text-xl text-[#4f555e]">
|
||||
<SvgIcon icon="ri:settings-4-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
</footer>
|
||||
</template>
|
||||
@ -0,0 +1,14 @@
|
||||
<script setup lang='ts'>
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import ListItem from './ListItem.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NScrollbar class="px-4">
|
||||
<div class="flex flex-col gap-2 text-sm">
|
||||
<ListItem text="Learning correlation" />
|
||||
<ListItem text="Write Code" />
|
||||
<ListItem text="docs..." />
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</template>
|
||||
@ -0,0 +1,52 @@
|
||||
<script setup lang='ts'>
|
||||
import { SvgIcon } from '@/components/common'
|
||||
|
||||
interface Props {
|
||||
text: string
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: 'click',): void
|
||||
(e: 'edit',): void
|
||||
(e: 'delete',): void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
function handleClick(event: Event) {
|
||||
emit('click')
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
emit('edit')
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
emit('delete')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
|
||||
@click="handleClick"
|
||||
>
|
||||
<span>
|
||||
<SvgIcon icon="ri:message-3-line" />
|
||||
</span>
|
||||
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
<div class="absolute z-10 flex visible right-1">
|
||||
<button class="p-1" @click="handleEdit">
|
||||
<SvgIcon icon="ri:edit-line" />
|
||||
</button>
|
||||
<button class="p-1" @click="handleDelete">
|
||||
<SvgIcon icon="ri:delete-bin-line" />
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
@ -0,0 +1,65 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, watch } from 'vue'
|
||||
import { NButton, NLayoutSider, useMessage } from 'naive-ui'
|
||||
import List from './List.vue'
|
||||
import Footer from './Footer.vue'
|
||||
|
||||
interface Props {
|
||||
collapsed?: boolean
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: 'update:collapsed', value: boolean): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
collapsed: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const ms = useMessage()
|
||||
|
||||
const collapsed = ref(props.collapsed)
|
||||
|
||||
watch(
|
||||
() => props.collapsed,
|
||||
(value: boolean) => {
|
||||
collapsed.value = value
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function handleAdd() {
|
||||
ms.info('Coming soon...')
|
||||
}
|
||||
|
||||
function handleCollapsed() {
|
||||
collapsed.value = !collapsed.value
|
||||
emit('update:collapsed', collapsed.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NLayoutSider
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="0"
|
||||
:width="260"
|
||||
collapse-mode="width"
|
||||
show-trigger="arrow-circle"
|
||||
bordered
|
||||
@update:collapsed="handleCollapsed"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<main class="flex-1 min-h-0 overflow-hidden">
|
||||
<div class="p-4">
|
||||
<NButton dashed block @click="handleAdd">
|
||||
New chat
|
||||
</NButton>
|
||||
</div>
|
||||
<List />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</NLayoutSider>
|
||||
</template>
|
||||
@ -0,0 +1,3 @@
|
||||
import Chat from './Chat/index.vue'
|
||||
|
||||
export { Chat }
|
||||
@ -0,0 +1,20 @@
|
||||
<script setup lang='ts'>
|
||||
interface Emit {
|
||||
(e: 'click'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
function handleClick() {
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
@ -0,0 +1,46 @@
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue'
|
||||
import type { PopoverPlacement } from 'naive-ui'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import Button from './Button.vue'
|
||||
|
||||
interface Props {
|
||||
tooltip?: string
|
||||
placement?: PopoverPlacement
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: 'click'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
tooltip: '',
|
||||
placement: 'bottom',
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const showTooltip = computed(() => Boolean(props.tooltip))
|
||||
|
||||
function handleClick() {
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showTooltip">
|
||||
<NTooltip :placement="placement" trigger="hover">
|
||||
<template #trigger>
|
||||
<Button @click="handleClick">
|
||||
<slot />
|
||||
</Button>
|
||||
</template>
|
||||
{{ tooltip }}
|
||||
</NTooltip>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button @click="handleClick">
|
||||
<slot />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, h } from 'vue'
|
||||
import {
|
||||
NDialogProvider,
|
||||
NLoadingBarProvider,
|
||||
NMessageProvider,
|
||||
NNotificationProvider,
|
||||
useDialog,
|
||||
useLoadingBar,
|
||||
useMessage,
|
||||
useNotification,
|
||||
} from 'naive-ui'
|
||||
|
||||
function registerNaiveTools() {
|
||||
window.$loadingBar = useLoadingBar()
|
||||
window.$dialog = useDialog()
|
||||
window.$message = useMessage()
|
||||
window.$notification = useNotification()
|
||||
}
|
||||
|
||||
const NaiveProviderContent = defineComponent({
|
||||
name: 'NaiveProviderContent',
|
||||
setup() {
|
||||
registerNaiveTools()
|
||||
},
|
||||
render() {
|
||||
return h('div')
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NLoadingBarProvider>
|
||||
<NDialogProvider>
|
||||
<NNotificationProvider>
|
||||
<NMessageProvider>
|
||||
<slot />
|
||||
<NaiveProviderContent />
|
||||
</NMessageProvider>
|
||||
</NNotificationProvider>
|
||||
</NDialogProvider>
|
||||
</NLoadingBarProvider>
|
||||
</template>
|
||||
@ -0,0 +1,23 @@
|
||||
<script setup lang='ts'>
|
||||
import { GithubSite } from '@/components/custom'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 overflow-hidden rounded-full">
|
||||
<img class="object-cover" src="@/assets/avatar.jpg" alt="avatar">
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h2 class="font-bold text-md">
|
||||
ChenZhaoYu
|
||||
</h2>
|
||||
<p class="text-xs text-gray-500">
|
||||
<GithubSite />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
import HoverButton from './HoverButton/index.vue'
|
||||
import NaiveProvider from './NaiveProvider/index.vue'
|
||||
import SvgIcon from './SvgIcon/index.vue'
|
||||
import UserAvatar from './UserAvatar/index.vue'
|
||||
|
||||
export { HoverButton, NaiveProvider, SvgIcon, UserAvatar }
|
||||
@ -0,0 +1,3 @@
|
||||
import GithubSite from './GithubSite.vue'
|
||||
|
||||
export { GithubSite }
|
||||
@ -1,5 +0,0 @@
|
||||
import NaiveProvider from './NaiveProvider.vue'
|
||||
import Icon from './Icon.vue'
|
||||
import GithubSite from './GithubSite.vue'
|
||||
|
||||
export { NaiveProvider, Icon, GithubSite }
|
||||
@ -0,0 +1,22 @@
|
||||
import type { App } from 'vue'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
},
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
scrollBehavior: () => ({ left: 0, top: 0 }),
|
||||
})
|
||||
|
||||
export async function setupRouter(app: App) {
|
||||
app.use(router)
|
||||
await router.isReady()
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
interface Window {
|
||||
$loadingBar?: import('naive-ui').LoadingBarProviderInst;
|
||||
$dialog?: import('naive-ui').DialogProviderInst;
|
||||
$message?: import('naive-ui').MessageProviderInst;
|
||||
$notification?: import('naive-ui').NotificationProviderInst;
|
||||
}
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
import axios, { type AxiosResponse } from 'axios'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: import.meta.env.VITE_GLOB_API_URL,
|
||||
timeout: 10 * 1000,
|
||||
})
|
||||
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error.response)
|
||||
},
|
||||
)
|
||||
|
||||
service.interceptors.response.use(
|
||||
(response: AxiosResponse): AxiosResponse => {
|
||||
if (response.status === 200)
|
||||
return response
|
||||
|
||||
throw new Error(response.status.toString())
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
export default service
|
||||
@ -0,0 +1,72 @@
|
||||
import type { AxiosResponse } from 'axios'
|
||||
import request from './axios'
|
||||
|
||||
export interface HttpOption {
|
||||
url: string
|
||||
data?: any
|
||||
method?: string
|
||||
headers?: any
|
||||
beforeRequest?: () => void
|
||||
afterRequest?: () => void
|
||||
}
|
||||
|
||||
export interface ExtraOption {
|
||||
notification?: boolean
|
||||
}
|
||||
|
||||
export interface Response<T = any> {
|
||||
data: T
|
||||
message: string | null
|
||||
status: string
|
||||
}
|
||||
|
||||
function http<T = any>({ url, data, method, headers, beforeRequest, afterRequest }: HttpOption) {
|
||||
const successHandler = (res: AxiosResponse<Response<T>>) => {
|
||||
if (res.data.status === 'Success')
|
||||
return res.data
|
||||
|
||||
return Promise.reject(res.data)
|
||||
}
|
||||
|
||||
const failHandler = (error: Response<Error>) => {
|
||||
afterRequest?.()
|
||||
throw new Error(error?.message || 'Error')
|
||||
}
|
||||
|
||||
beforeRequest?.()
|
||||
|
||||
method = method || 'GET'
|
||||
|
||||
const params = Object.assign(typeof data === 'function' ? data() : data ?? {}, {})
|
||||
|
||||
return method === 'GET'
|
||||
? request.get(url, { params }).then(successHandler, failHandler)
|
||||
: request.post(url, params, { headers }).then(successHandler, failHandler)
|
||||
}
|
||||
|
||||
export function get<T = any>(
|
||||
{ url, data, method = 'GET', beforeRequest, afterRequest }: HttpOption,
|
||||
): Promise<Response<T>> {
|
||||
return http<T>({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
beforeRequest,
|
||||
afterRequest,
|
||||
})
|
||||
}
|
||||
|
||||
export function post<T = any>(
|
||||
{ url, data, method = 'POST', headers, beforeRequest, afterRequest }: HttpOption,
|
||||
): Promise<Response<T>> {
|
||||
return http<T>({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
headers,
|
||||
beforeRequest,
|
||||
afterRequest,
|
||||
})
|
||||
}
|
||||
|
||||
export default post
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<span class="leading-relaxed whitespace-pre-wrap">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
@ -1,3 +0,0 @@
|
||||
import Message from './Message/index.vue'
|
||||
|
||||
export { Message }
|
||||
@ -1,118 +0,0 @@
|
||||
<script setup lang='ts'>
|
||||
import { nextTick, onMounted, ref } from 'vue'
|
||||
import { NButton, NInput, NPopover, useMessage } from 'naive-ui'
|
||||
import { Message } from './components'
|
||||
import { clearChatContext, fetchChatAPI } from './request'
|
||||
import { Icon } from '@/components'
|
||||
|
||||
interface ListProps {
|
||||
dateTime: string
|
||||
message: string
|
||||
reversal?: boolean
|
||||
}
|
||||
|
||||
const scrollRef = ref<HTMLDivElement>()
|
||||
|
||||
const ms = useMessage()
|
||||
|
||||
const prompt = ref('')
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const list = ref<ListProps[]>([])
|
||||
|
||||
onMounted(initChat)
|
||||
|
||||
function initChat() {
|
||||
addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.', false)
|
||||
}
|
||||
|
||||
async function handleClear() {
|
||||
try {
|
||||
const { message } = await clearChatContext()
|
||||
ms.success(message)
|
||||
list.value = []
|
||||
setTimeout(initChat, 100)
|
||||
}
|
||||
catch (error) {
|
||||
ms.error('Clear failed, please try again later.')
|
||||
}
|
||||
}
|
||||
|
||||
function handleEnter(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter')
|
||||
handleSubmit()
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
const message = prompt.value.trim()
|
||||
|
||||
if (!message || !message.length) {
|
||||
ms.warning('Please enter a message')
|
||||
return
|
||||
}
|
||||
|
||||
addMessage(message, true)
|
||||
prompt.value = ''
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const { text } = await fetchChatAPI(message)
|
||||
addMessage(text, false)
|
||||
}
|
||||
catch (error: any) {
|
||||
addMessage(error.message ?? 'Request failed, please try again later.', false)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(message: string, reversal = false) {
|
||||
list.value.push({ dateTime: new Date().toLocaleString(), message, reversal })
|
||||
nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
|
||||
<header class="flex items-center justify-between p-4">
|
||||
<h1 class="text-xl font-bold">
|
||||
ChatGPT Web
|
||||
</h1>
|
||||
<div>
|
||||
<NPopover>
|
||||
<template #trigger>
|
||||
<button
|
||||
class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
|
||||
@click="handleClear"
|
||||
>
|
||||
<Icon icon="ri:delete-bin-6-line" />
|
||||
</button>
|
||||
</template>
|
||||
<span>Clear Context</span>
|
||||
</NPopover>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 overflow-hidden border-y">
|
||||
<div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
|
||||
<div>
|
||||
<Message
|
||||
v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
|
||||
:reversal="item.reversal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="p-4">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
|
||||
<NButton type="primary" :loading="loading" @click="handleSubmit">
|
||||
<template #icon>
|
||||
<Icon icon="ri:send-plane-fill" />
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,41 +0,0 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const BASE_URL = import.meta.env.VITE_GLOB_API_URL
|
||||
|
||||
async function fetchChatAPI(message: string) {
|
||||
if (!message || message.trim() === '')
|
||||
return
|
||||
|
||||
try {
|
||||
const { status, data } = await axios.post(`${BASE_URL}/chat`, { message })
|
||||
|
||||
if (status === 200) {
|
||||
if (data.text)
|
||||
return Promise.resolve(data)
|
||||
|
||||
if (data.statusText)
|
||||
return Promise.reject(new Error(data.statusText))
|
||||
}
|
||||
|
||||
return Promise.reject(new Error('Request failed'))
|
||||
}
|
||||
catch (error) {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function clearChatContext() {
|
||||
try {
|
||||
const { status, data } = await axios.post(`${BASE_URL}/clear`)
|
||||
|
||||
if (status === 200)
|
||||
return Promise.resolve(data)
|
||||
|
||||
return Promise.reject(new Error('Request failed'))
|
||||
}
|
||||
catch (error) {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
export { fetchChatAPI, clearChatContext }
|
||||
@ -0,0 +1,13 @@
|
||||
<script setup lang='ts'>
|
||||
import { Chat } from '@/components/business'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full p-4 overflow-hidden">
|
||||
<Chat />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue