diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index ec7882de..831302f6 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -1,5 +1,6 @@
diff --git a/src/views/chat/components/ChatHeader/Index.vue b/src/views/chat/components/ChatHeader/Index.vue
new file mode 100644
index 00000000..ab697ca8
--- /dev/null
+++ b/src/views/chat/components/ChatHeader/Index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/ChatMessage/Index.vue b/src/views/chat/components/ChatMessage/Index.vue
new file mode 100644
index 00000000..9fbbffde
--- /dev/null
+++ b/src/views/chat/components/ChatMessage/Index.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/InputSection/Index.vue b/src/views/chat/components/InputSection/Index.vue
new file mode 100644
index 00000000..441f9916
--- /dev/null
+++ b/src/views/chat/components/InputSection/Index.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/Message/BaseMessage.vue b/src/views/chat/components/Message/BaseMessage.vue
new file mode 100644
index 00000000..505222ec
--- /dev/null
+++ b/src/views/chat/components/Message/BaseMessage.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/Message/ImageMessage.vue b/src/views/chat/components/Message/ImageMessage.vue
new file mode 100644
index 00000000..49418840
--- /dev/null
+++ b/src/views/chat/components/Message/ImageMessage.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/Message/TextMessage.vue b/src/views/chat/components/Message/TextMessage.vue
new file mode 100644
index 00000000..ca621df7
--- /dev/null
+++ b/src/views/chat/components/Message/TextMessage.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/Session/Index.vue b/src/views/chat/components/Session/Index.vue
new file mode 100644
index 00000000..11ea8c7f
--- /dev/null
+++ b/src/views/chat/components/Session/Index.vue
@@ -0,0 +1,33 @@
+
+
+
+ onSessionItemClick(index)"
+ />
+
+
+
+
+
diff --git a/src/views/chat/components/SessionItem/Index.vue b/src/views/chat/components/SessionItem/Index.vue
new file mode 100644
index 00000000..34fdbd33
--- /dev/null
+++ b/src/views/chat/components/SessionItem/Index.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/chat/components/ToolSection/Index.vue b/src/views/chat/components/ToolSection/Index.vue
new file mode 100644
index 00000000..98fb157b
--- /dev/null
+++ b/src/views/chat/components/ToolSection/Index.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/views/chat/model/BaseConversation.ts b/src/views/chat/model/BaseConversation.ts
new file mode 100644
index 00000000..56bc3de7
--- /dev/null
+++ b/src/views/chat/model/BaseConversation.ts
@@ -0,0 +1,32 @@
+import { MessageModelType } from '../types'
+
+export default class BaseConversation {
+ public id: string
+ public avatar: string
+ public name: string
+ public description: string
+ public createTime: number
+ public updateTime: number
+ public unreadCount: number
+ public msgList: Array
+
+ constructor(
+ id: string,
+ avatar: string,
+ name: string,
+ descrition: string,
+ createTime: number,
+ updateTime: number,
+ unreadCount: number,
+ msgList: Array
+ ) {
+ this.id = id
+ this.avatar = avatar
+ this.name = name
+ this.description = descrition
+ this.createTime = createTime
+ this.updateTime = updateTime
+ this.unreadCount = unreadCount
+ this.msgList = msgList
+ }
+}
diff --git a/src/views/chat/model/BaseMessage.ts b/src/views/chat/model/BaseMessage.ts
new file mode 100644
index 00000000..939d9d4b
--- /dev/null
+++ b/src/views/chat/model/BaseMessage.ts
@@ -0,0 +1,35 @@
+import { MessageRole, MessageType, SendStatus } from '../types'
+
+export default class BaseMessage {
+ id: string
+ avatar: string
+ nickname: string
+ createTime: number
+ isRead: boolean
+ role: MessageRole
+ sendStatus: SendStatus
+ messageType: MessageType
+ conversationId: string
+
+ constructor(
+ id: string,
+ avatar: string,
+ nickname: string,
+ createTime: number,
+ isRead: boolean,
+ role: MessageRole,
+ sendStauts: SendStatus,
+ messageType: MessageType,
+ conversationId: string
+ ) {
+ this.id = id
+ this.avatar = avatar
+ this.nickname = nickname
+ this.createTime = createTime
+ this.isRead = isRead
+ this.role = role
+ this.sendStatus = sendStauts
+ this.messageType = messageType
+ this.conversationId = conversationId
+ }
+}
diff --git a/src/views/chat/model/ChatConversation.ts b/src/views/chat/model/ChatConversation.ts
new file mode 100644
index 00000000..3e10a3aa
--- /dev/null
+++ b/src/views/chat/model/ChatConversation.ts
@@ -0,0 +1,17 @@
+import BaseConversation from './BaseConversation'
+import BaseMessage from './BaseMessage'
+
+export class ChatConversation extends BaseConversation {
+ constructor(
+ id: string,
+ avatar: string,
+ name: string,
+ descrition: string,
+ createTime: number,
+ updateTime: number,
+ unreadCount: number,
+ msgList: Array
+ ) {
+ super(id, avatar, name, descrition, createTime, updateTime, unreadCount, msgList)
+ }
+}
diff --git a/src/views/chat/model/ImageMessage.ts b/src/views/chat/model/ImageMessage.ts
new file mode 100644
index 00000000..5ff07547
--- /dev/null
+++ b/src/views/chat/model/ImageMessage.ts
@@ -0,0 +1,22 @@
+import { MessageRole, MessageType, SendStatus } from '../types'
+import BaseMessage from './BaseMessage'
+
+export default class ImageMessage extends BaseMessage {
+ content: string
+
+ constructor(
+ id: string,
+ avatar: string,
+ nickname: string,
+ createTime: number,
+ isRead: boolean,
+ content: string,
+ role: MessageRole,
+ sendStatus: SendStatus,
+ messageType: MessageType,
+ conversationId: string
+ ) {
+ super(id, avatar, nickname, createTime, isRead, role, sendStatus, messageType, conversationId)
+ this.content = content
+ }
+}
diff --git a/src/views/chat/model/TextMessage.ts b/src/views/chat/model/TextMessage.ts
new file mode 100644
index 00000000..a0ac8086
--- /dev/null
+++ b/src/views/chat/model/TextMessage.ts
@@ -0,0 +1,22 @@
+import { MessageRole, MessageType, SendStatus } from '../types'
+import BaseMessage from './BaseMessage'
+
+export default class TextMessage extends BaseMessage {
+ content: string
+
+ constructor(
+ id: string,
+ avatar: string,
+ nickname: string,
+ createTime: number,
+ isRead: boolean,
+ content: string,
+ role: MessageRole,
+ sendStatus: SendStatus,
+ messageType: MessageType,
+ conversationId: string
+ ) {
+ super(id, avatar, nickname, createTime, isRead, role, sendStatus, messageType, conversationId)
+ this.content = content
+ }
+}
diff --git a/src/views/chat/store/chatstore.ts b/src/views/chat/store/chatstore.ts
new file mode 100644
index 00000000..e4969f05
--- /dev/null
+++ b/src/views/chat/store/chatstore.ts
@@ -0,0 +1,135 @@
+import { defineStore } from 'pinia'
+import BaseConversation from '../model/BaseConversation'
+import BaseMessage from '../model/BaseMessage'
+import { ConversationModelType, MessageRole, MessageType, SendStatus } from '../types/index.d.ts'
+
+interface ChatStoreModel {
+ sessionList: Array
+ currentSession: ConversationModelType | null
+ currentSessionIndex: number
+ inputText: string
+}
+
+export const useChatStore = defineStore('chatStore', {
+ state: (): ChatStoreModel => ({
+ sessionList: [
+ {
+ id: '11111',
+ name: '张三',
+ avatar:
+ 'https://img.zcool.cn/community/019fb65925bc32a801216a3ef77f7b.png@1280w_1l_2o_100sh.png',
+ description: 'sss',
+ createTime: 1693970987760,
+ updateTime: 1693970987760,
+ unreadCount: 1,
+ msgList: [
+ {
+ avatar:
+ 'https://img0.baidu.com/it/u=1121635512,1294972039&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
+ nickname: 'Dylan May',
+ id: '222221111',
+ isRead: false,
+ messageType: MessageType.TEXT,
+ sendStatus: SendStatus.SUCCESS,
+ role: MessageRole.SELF,
+ createTime: 1693970987760,
+ conversationId: '11111',
+ content: 'hello MUSK'
+ },
+ {
+ avatar:
+ 'https://img0.baidu.com/it/u=4211304696,1059959254&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1174',
+ nickname: 'Elon Musk',
+ id: '2222222222',
+ isRead: false,
+ messageType: MessageType.TEXT,
+ sendStatus: SendStatus.SUCCESS,
+ role: MessageRole.OTHER,
+ createTime: 1693970987760,
+ conversationId: '11111',
+ content: 'hello DYLAN'
+ }
+ ]
+ },
+ {
+ id: '22222',
+ name: '搞笑的一家人',
+ avatar:
+ 'https://img.zcool.cn/community/019fb65925bc32a801216a3ef77f7b.png@1280w_1l_2o_100sh.png',
+ description: '今天晚上吃啥',
+ createTime: 1693970987760,
+ updateTime: 1693970987760,
+ unreadCount: 1,
+ msgList: [
+ {
+ avatar:
+ 'https://img.zcool.cn/community/019fb65925bc32a801216a3ef77f7b.png@1280w_1l_2o_100sh.png',
+ nickname: '小艳',
+ id: '22222',
+ isRead: false,
+ messageType: MessageType.TEXT,
+ sendStatus: SendStatus.SUCCESS,
+ role: MessageRole.OTHER,
+ createTime: 1693970987760,
+ conversationId: '22222',
+ content: 'what your name'
+ }
+ ]
+ }
+ ],
+ currentSession: null,
+ currentSessionIndex: 0,
+ inputText: ''
+ }),
+
+ getters: {
+ getSessionList(state: ChatStoreModel): Array {
+ return state.sessionList
+ },
+
+ getCurrentSession(state: ChatStoreModel): ConversationModelType | null {
+ return state.currentSession
+ },
+
+ getCurrentSessionIndex(state: ChatStoreModel): number {
+ return state.currentSessionIndex
+ }
+ },
+
+ actions: {
+ addSession(session: BaseConversation) {
+ this.sessionList.push(session)
+ },
+
+ setCurrentConversation() {
+ this.currentSession = this.sessionList[this.currentSessionIndex]
+ },
+
+ setCurrentSessionIndex(index: number) {
+ this.currentSessionIndex = index
+ },
+
+ setInputText(content: string) {
+ this.inputText = content
+ },
+
+ addMessageToCurrentSession(message: T): void {
+ this.currentSession?.msgList.push(message)
+ },
+
+ addMessageToSesstion(message: T): void {
+ // get the conversation from list
+ const conversationIndex = this.sessionList.findIndex((item) => {
+ return item.id === message.conversationId
+ })
+
+ const msgConversation = this.sessionList[conversationIndex]
+
+ // add the message
+ msgConversation?.msgList.push(message)
+
+ // replace the old Conversation
+ this.sessionList.splice(conversationIndex, 1, msgConversation)
+ }
+ }
+})
diff --git a/src/views/chat/types/index.d.ts b/src/views/chat/types/index.d.ts
new file mode 100644
index 00000000..697decec
--- /dev/null
+++ b/src/views/chat/types/index.d.ts
@@ -0,0 +1,27 @@
+import BaseConversation from '../model/BaseConversation'
+import BaseMessage from '../model/BaseMessage'
+import { ChatConversation } from '../model/ChatConversation'
+import ImageMessage from '../model/ImageMessage'
+import TextMessage from '../model/TextMessage'
+
+export enum MessageRole {
+ SELF = 1,
+ SYSTEM = 2,
+ OTHER = 3
+}
+
+export enum SendStatus {
+ FAILURE = 1,
+ SENDING = 2,
+ SUCCESS = 3
+}
+
+export enum MessageType {
+ TEXT = 1,
+ IMAGE = 2,
+ AUDIO = 3,
+ SYSTEM = 4
+}
+
+export type MessageModelType = BaseMessage | TextMessage | ImageMessage
+export type ConversationModelType = BaseConversation | ChatConversation