From 50e2da195b466b44a412e5f73c44c7e9d4d2554d Mon Sep 17 00:00:00 2001 From: Germey Date: Mon, 2 Oct 2023 01:27:20 +0800 Subject: [PATCH] add responding --- src/components/chat/Message.vue | 1 + src/pages/chat/Conversation.vue | 78 +++++++++++++-------------------- src/router/chat.ts | 13 +++++- src/router/constants.ts | 1 + 4 files changed, 44 insertions(+), 49 deletions(-) diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue index abe12c8..485e2c6 100644 --- a/src/components/chat/Message.vue +++ b/src/components/chat/Message.vue @@ -88,6 +88,7 @@ export default defineComponent({ .content { border-radius: 10px; padding: 8px 15px; + max-width: 800px; // background-color: aqua; } } diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue index 7e02f07..ec8bfa7 100644 --- a/src/pages/chat/Conversation.vue +++ b/src/pages/chat/Conversation.vue @@ -27,7 +27,8 @@ import { IChatResponse, API_ID_CHATGPT, applicationOperator, - IApplication + IApplication, + IChatMessageState } from '@/operators'; import InputBox from '@/components/chat/InputBox.vue'; import ModelSelector from '@/components/chat/ModelSelector.vue'; @@ -35,6 +36,7 @@ import { chatOperator } from '@/operators'; import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode'; import axios from 'axios'; import ApiStatus from '@/components/common/ApiStatus.vue'; +import { ROUTE_CHAT_CONVERSATION } from '@/router'; export interface IData { messages: IChatMessage[]; @@ -61,48 +63,7 @@ export default defineComponent({ initializing: false, applied: undefined, application: undefined, - messages: [ - { - role: ROLE_USER, - content: 'hello' - }, - { - role: ROLE_ASSISTANT, - content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```' - }, - { - role: ROLE_USER, - content: 'hello' - }, - { - role: ROLE_ASSISTANT, - content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```' - }, - { - role: ROLE_USER, - content: 'hello' - }, - { - role: ROLE_ASSISTANT, - content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```' - }, - { - role: ROLE_USER, - content: 'hello' - }, - { - role: ROLE_ASSISTANT, - content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```' - }, - { - role: ROLE_USER, - content: 'hello' - }, - { - role: ROLE_ASSISTANT, - content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```' - } - ] + messages: [] }; }, computed: { @@ -111,6 +72,7 @@ export default defineComponent({ } }, mounted() { + console.log('mounted'); this.onLoadModel(); }, methods: { @@ -133,18 +95,23 @@ export default defineComponent({ role: ROLE_USER }); this.question = ''; + await this.onFetchAnswer(); }, async onFetchAnswer() { const token = this.application?.credential?.token; const endpoint = this.application?.api?.endpoint; const question = this.messages[this.messages.length - 1].content; - console.log('q', question); if (!token || !endpoint || !question) { console.error('no token or endpoint or question'); return; } - console.log('token', token); + this.messages.push({ + content: '', + role: ROLE_ASSISTANT, + state: IChatMessageState.PENDING + }); + // request server to get answer chatOperator .request( { @@ -156,13 +123,24 @@ export default defineComponent({ token, endpoint, stream: (response: IChatResponse) => { - console.log('response', response); + this.messages[this.messages.length - 1].content = response.answer; + if (!this.conversationId) { + this.$router.push({ + name: ROUTE_CHAT_CONVERSATION, + params: { + id: response.conversation_id + } + }); + } } } ) + .then(() => { + this.messages[this.messages.length - 1].state = IChatMessageState.FINISHED; + }) .catch((error) => { if (this.messages && this.messages.length > 0) { - this.messages[this.messages.length - 1].state = ChatMessageState.FAILED; + this.messages[this.messages.length - 1].state = IChatMessageState.FAILED; } if (axios.isCancel(error)) { this.messages[this.messages.length - 1].error = { @@ -181,7 +159,6 @@ export default defineComponent({ } } }); - // console.log('this.response', response); } } }); @@ -200,6 +177,11 @@ export default defineComponent({ width: 100%; overflow-y: scroll; padding: 15px 0; + .messages { + .message { + margin-bottom: 15px; + } + } } .bottom { width: 100%; diff --git a/src/router/chat.ts b/src/router/chat.ts index a480209..97e72c0 100644 --- a/src/router/chat.ts +++ b/src/router/chat.ts @@ -1,4 +1,10 @@ -import { ROUTE_AUTH_CALLBACK, ROUTE_AUTH_LOGIN, ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_INDEX } from './constants'; +import { + ROUTE_AUTH_CALLBACK, + ROUTE_AUTH_LOGIN, + ROUTE_CHAT_CONVERSATION, + ROUTE_CHAT_CONVERSATION_NEW, + ROUTE_CHAT_INDEX +} from './constants'; export default { path: '/chat', @@ -9,6 +15,11 @@ export default { name: ROUTE_CHAT_INDEX, component: () => import('@/pages/chat/Index.vue') }, + { + path: 'conversation', + name: ROUTE_CHAT_CONVERSATION_NEW, + component: () => import('@/pages/chat/Conversation.vue') + }, { path: 'conversation/:id', name: ROUTE_CHAT_CONVERSATION, diff --git a/src/router/constants.ts b/src/router/constants.ts index 6efcfa1..71c6878 100644 --- a/src/router/constants.ts +++ b/src/router/constants.ts @@ -5,6 +5,7 @@ export const ROUTE_AUTH_CALLBACK = 'auth-callback'; export const ROUTE_CHAT_INDEX = 'chat-index'; export const ROUTE_CHAT_CONVERSATION = 'chat-conversation'; +export const ROUTE_CHAT_CONVERSATION_NEW = 'chat-conversation-new'; export const ROUTE_PAINT_INDEX = 'paint-index'; export const ROUTE_PAINT_HISTORY = 'paint-history';