Loading...
}
- {status === 'succeeded' && (inboxList.length > 0 ?
- inboxList.map((item) => (
-
handleSelectChat(item)}
- >
-
-
-
+ {status === 'succeeded' &&
+ (inboxList.length > 0 ? (
+ inboxList.map((chat) => (
+
handleSelectChat(chat)}
+ >
+
+
+
+
+
+
{chat.creator.name}
+
{chat.last_message}
+
-
-
{item.name}
-
{item.message}
+
+
{chatDateFormat(chat.last_time)}
+ {chat.unread_count > 0 && (
+
{chat.unread_count}
+ )}
-
-
{item.date}
- {item.unreadMessageCount > 0 && (
-
{item.unreadMessageCount}
- )}
-
-
- )) :
No Chats Found
)}
+ ))
+ ) : (
+
No Chats Found
+ ))}
);
diff --git a/src/components/StreamingMarkdown.jsx b/src/components/StreamingMarkdown.jsx
new file mode 100644
index 0000000..04a2ef2
--- /dev/null
+++ b/src/components/StreamingMarkdown.jsx
@@ -0,0 +1,61 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useTypewriter } from '../hooks/useTypewriter';
+
+export default function StreamingMarkdown({ content, isStreaming = z, typewriterSpeed = 30 }) {
+ const { displayText, isTyping, skipAnimation } = useTypewriter(isStreaming ? content : '', typewriterSpeed);
+
+ // 如果不是流式模式，直接显示完整内容
+ const textToRender = isStreaming ? displayText : content;
+
+ return (
+
+
+ {String(children).replace(/\n$/, '')}
+
+ ) : (
+
+ {children}
+
+ );
+ },
+ // 自定义表格样式
+ table({ children }) {
+ return (
+
+ );
+ },
+ // 自定义链接样式
+ a({ href, children }) {
+ return (
+
+ {children}
+
+ );
+ },
+ }}
+ >
+ {textToRender}
+
+
+ {/* 打字机效果控制 */}
+ {isStreaming && isTyping && (
+
+
+
+ )}
+
+ );
+}
diff --git a/src/hooks/useTypewriter.js b/src/hooks/useTypewriter.js
new file mode 100644
index 0000000..61e519c
--- /dev/null
+++ b/src/hooks/useTypewriter.js
@@ -0,0 +1,55 @@
+import { useState, useEffect, useRef } from 'react';
+
+export const useTypewriter = (text, speed = 30) => {
+ const [displayText, setDisplayText] = useState('');
+ const [isTyping, setIsTyping] = useState(false);
+ const [isCompleted, setIsCompleted] = useState(false);
+ const intervalRef = useRef(null);
+ const indexRef = useRef(0);
+
+ useEffect(() => {
+ if (!text) return;
+
+ setDisplayText('');
+ setIsTyping(true);
+ setIsCompleted(false);
+ indexRef.current = 0;
+
+ intervalRef.current = setInterval(() => {
+ setDisplayText((prev) => {
+ const newText = text.slice(0, indexRef.current + 1);
+ indexRef.current++;
+
+ if (indexRef.current >= text.length) {
+ setIsTyping(false);
+ setIsCompleted(true);
+ clearInterval(intervalRef.current);
+ }
+
+ return newText;
+ });
+ }, speed);
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ };
+ }, [text, speed]);
+
+ const skipAnimation = () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ setDisplayText(text);
+ setIsTyping(false);
+ setIsCompleted(true);
+ };
+
+ return {
+ displayText,
+ isTyping,
+ isCompleted,
+ skipAnimation,
+ };
+};
diff --git a/src/index.css b/src/index.css
index b4e13b6..7812daf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+@import './styles/ChatMessage.scss';
+
:root {
--bs-primary-rgb: 99, 102, 241; /* 必须匹配custom-theme.scss中的$primary */
}
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 76a8607..5e4589c 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,3 +1,4 @@
+import { format, isToday, parseISO } from 'date-fns';
import { BRAND_SOURCES } from "./constant";
/**
@@ -60,4 +61,13 @@ export const getBrandSourceName = (source) => {
export const getTemplateMissionName = (mission) => {
return TEMPLATE_MISSIONS.find(item => item.value === mission)?.name || mission;
+};
+
+export const chatDateFormat = (date) => {
+ const now = typeof date === 'string' ? parseISO(date) : date;
+ if (isToday(now)) {
+ return format(now, 'HH:mm');
+ } else {
+ return format(now, 'MMM do');
+ }
};
\ No newline at end of file
diff --git a/src/pages/CreatorInbox.jsx b/src/pages/CreatorInbox.jsx
index 2aa09d8..51a21e9 100644
--- a/src/pages/CreatorInbox.jsx
+++ b/src/pages/CreatorInbox.jsx
@@ -3,11 +3,11 @@ import InboxList from '@/components/InboxList';
import ChatWindow from '@/components/ChatWindow';
import '@/styles/Inbox.scss';
import { useSelector, useDispatch } from 'react-redux';
-import { resetSelectedChat } from '@/store/slices/inboxSlice';
+import { resetSelectedChat } from '@/store/slices/chatSlice';
import ChatDetails from '@/components/ChatDetails';
export default function CreatorInbox() {
- const { selectedChat } = useSelector((state) => state.inbox);
+ const { currentChat } = useSelector((state) => state.chat);
const [openChatDetails, setOpenChatDetails] = useState(false);
const dispatch = useDispatch();
@@ -17,12 +17,12 @@ export default function CreatorInbox() {
};
}, []);
- useEffect(() => {}, [selectedChat]);
+ useEffect(() => {}, [currentChat]);
return (
- {selectedChat?.id && setOpenChatDetails(true)} />}
+ {currentChat?.conversation_id && setOpenChatDetails(true)} />}
{openChatDetails && setOpenChatDetails(false)} />}
);
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 0385e85..6b30fa5 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -12,6 +12,7 @@ import CreatorDiscovery from '@/pages/CreatorDiscovery';
import PrivateCreator from '@/pages/PrivateCreator';
import CreatorDetail from '@/pages/CreatorDetail';
import InboxTemplate from '@/pages/InboxTemplate';
+import ChatTest from '@/components/ChatTest';
// Routes configuration object
const routes = [
@@ -28,7 +29,7 @@ const routes = [
children: [
{
path: '',
- element:
,
+ element:
,
},
{
path: 'tiktok',
@@ -93,6 +94,10 @@ const routes = [
path: '/inbox-templates',
element:
,
},
+ {
+ path: '/chat-test',
+ element:
,
+ },
];
// Create router with routes wrapped in the layout
diff --git a/src/services/api.js b/src/services/api.js
index e643005..f8027d1 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -30,7 +30,8 @@ api.interceptors.response.use(
window.location.href = '/login';
dispatch(clearUser());
}
- return Promise.reject(error);
+ console.log(error);
+ return Promise.reject(error.response.data || error);
}
);
diff --git a/src/store/slices/chatSlice.js b/src/store/slices/chatSlice.js
index 0da7e3a..6a55ab2 100644
--- a/src/store/slices/chatSlice.js
+++ b/src/store/slices/chatSlice.js
@@ -50,6 +50,41 @@ export const createConversation = createAsyncThunk(
}
);
+export const fetchConversationSummary = createAsyncThunk(
+ 'chat/fetchConversationSummary',
+ async (conversation_id, { rejectWithValue, dispatch }) => {
+ try {
+ const response = await api.get(`/gmail/conversations/summary/${conversation_id}/`);
+ console.log(response);
+ if (response.code === 200) {
+ return response.data;
+ }
+ console.log(response);
+ throw new Error(response.message);
+ } catch (error) {
+ console.log(error);
+ dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
+export const getRecommendedReply = createAsyncThunk(
+ 'chat/getRecommendedReply',
+ async (query, { rejectWithValue, dispatch }) => {
+ try {
+ const response = await api.post('/gmail/recommended-reply/', query);
+ if (response.code === 200) {
+ return response.data;
+ }
+ throw new Error(response.message);
+ } catch (error) {
+ dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
const initialState = {
currentChat: null,
status: 'idle',
@@ -59,20 +94,51 @@ const initialState = {
const chatSlice = createSlice({
name: 'chat',
initialState,
- reducers: {},
+ reducers: {
+ selectChat: (state, action) => {
+ state.currentChat = action.payload;
+ console.log(action.payload);
+ },
+ resetSelectedChat: (state) => {
+ state.currentChat = null;
+ },
+ },
extraReducers: (builder) => {
builder.addCase(fetchChatDetails.pending, (state) => {
state.status = 'loading';
});
builder.addCase(fetchChatDetails.fulfilled, (state, action) => {
state.status = 'succeeded';
- state.currentChat = action.payload;
+ const { messages, negotiation } = action.payload;
+ state.currentChat.messages = messages;
+ state.currentChat.negotiation = negotiation;
});
builder.addCase(fetchChatDetails.rejected, (state, action) => {
state.status = 'failed';
state.error = action.payload;
});
+ builder.addCase(fetchConversationSummary.pending, (state) => {
+ state.status = 'loading';
+ });
+ builder.addCase(fetchConversationSummary.fulfilled, (state, action) => {
+ state.status = 'succeeded';
+ state.currentChat.summary = action.payload;
+ });
+ builder.addCase(fetchConversationSummary.rejected, (state, action) => {
+ state.currentChat.summary_error = action.payload;
+ });
+ builder.addCase(getRecommendedReply.pending, (state) => {
+ state.status = 'loading';
+ });
+ builder.addCase(getRecommendedReply.fulfilled, (state, action) => {
+ state.status = 'succeeded';
+ state.currentChat.recommended_reply = action.payload;
+ });
+ builder.addCase(getRecommendedReply.rejected, (state, action) => {
+ state.currentChat.recommended_reply_error = action.payload;
+ });
},
});
+export const { selectChat, resetSelectedChat } = chatSlice.actions;
export default chatSlice.reducer;
diff --git a/src/store/slices/creatorsSlice.js b/src/store/slices/creatorsSlice.js
index 7807a6e..3b8f0af 100644
--- a/src/store/slices/creatorsSlice.js
+++ b/src/store/slices/creatorsSlice.js
@@ -248,7 +248,7 @@ export const fetchPrivateCreators = createAsyncThunk(
const { code, data, message, pagination } = await api.post(
`/daren_detail/private/pools/creators/filter/?page=${page}`,
- { pool_id: 1, filter }
+ { filter }
);
if (code === 200) {
return { data, pagination };
diff --git a/src/store/slices/inboxSlice.js b/src/store/slices/inboxSlice.js
index 95c78c1..dc86f4f 100644
--- a/src/store/slices/inboxSlice.js
+++ b/src/store/slices/inboxSlice.js
@@ -1,5 +1,4 @@
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { format, isToday, parseISO } from 'date-fns';
import api from '@/services/api';
import { setNotificationBarMessage } from './notificationBarSlice';
@@ -164,28 +163,39 @@ const mockChatHistory = [
},
];
-const chatDateFormat = (date) => {
- const now = typeof date === 'string' ? parseISO(date) : date;
- if (isToday(now)) {
- return format(now, 'HH:mm');
- } else {
- return format(now, 'MMM do');
- }
-};
-
-export const fetchInboxList = createAsyncThunk('inbox/fetchInboxList', async (_, { rejectWithValue }) => {
+export const fetchInboxList = createAsyncThunk('inbox/fetchInboxList', async (query, { rejectWithValue }) => {
try {
- const response = await api.get('/chat-history/');
+ const response = await api.get('/chat-history/get_negotiation_chats/', { params: query });
if (response.code === 200) {
return response.data;
} else {
throw new Error(response.message);
}
} catch (error) {
- return rejectWithValue(error.response.data.message);
+ return rejectWithValue(error.message);
}
});
+export const deleteConversation = createAsyncThunk(
+ 'inbox/deleteConversation',
+ async (id, { rejectWithValue, dispatch }) => {
+ try {
+ const response = await api.delete('/chat-history/delete_conversation/', {
+ params: { conversation_id: id },
+ });
+ if (response.code === 200) {
+ dispatch(setNotificationBarMessage({ message: response.message, type: 'success' }));
+ dispatch(fetchInboxList({}));
+ return response.data;
+ }
+ throw new Error(response.message);
+ } catch (error) {
+ dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
export const fetchChatHistory = createAsyncThunk('inbox/fetchChatHistory', async (id) => {
await new Promise((resolve) => setTimeout(resolve, 500));
return { chatHistory: mockChatHistory, chatId: id };
@@ -200,7 +210,7 @@ export const fetchTemplates = createAsyncThunk('inbox/fetchTemplates', async (qu
throw new Error(response.message);
}
} catch (error) {
- return rejectWithValue(error.response.data.message);
+ return rejectWithValue(error.message);
}
});
@@ -216,7 +226,7 @@ export const editTemplateThunk = createAsyncThunk(
}
} catch (error) {
dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
- return rejectWithValue(error.response.data.message);
+ return rejectWithValue(error.message);
}
}
);
@@ -233,7 +243,7 @@ export const addTemplateThunk = createAsyncThunk(
}
} catch (error) {
dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
- return rejectWithValue(error.response.data.message);
+ return rejectWithValue(error.message);
}
}
);
@@ -247,7 +257,7 @@ export const getTemplateDetail = createAsyncThunk('inbox/getTemplateDetail', asy
throw new Error(response.message);
}
} catch (error) {
- return rejectWithValue(error.response.data.message);
+ return rejectWithValue(error.message);
}
});
@@ -264,14 +274,7 @@ const initialState = {
const inboxSlice = createSlice({
name: 'inbox',
initialState,
- reducers: {
- selectChat: (state, action) => {
- state.selectedChat = action.payload;
- },
- resetSelectedChat: (state) => {
- state.selectedChat = {};
- },
- },
+ reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchInboxList.pending, (state) => {
@@ -279,7 +282,7 @@ const inboxSlice = createSlice({
})
.addCase(fetchInboxList.fulfilled, (state, action) => {
state.inboxStatus = 'succeeded';
- state.inboxList = action.payload;
+ state.inboxList = action.payload.results;
})
.addCase(fetchInboxList.rejected, (state, action) => {
state.inboxStatus = 'failed';
@@ -336,11 +339,11 @@ const inboxSlice = createSlice({
state.error = action.payload;
})
.addCase(getTemplateDetail.fulfilled, (state, action) => {
- const template = state.templates.find(item => item.id === action.payload.id);
+ const template = state.templates.find((item) => item.id === action.payload.id);
if (template) {
Object.assign(template, action.payload);
}
- })
+ });
},
});
diff --git a/src/styles/ChatMessage.scss b/src/styles/ChatMessage.scss
new file mode 100644
index 0000000..98792c9
--- /dev/null
+++ b/src/styles/ChatMessage.scss
@@ -0,0 +1,190 @@
+// ChatMessage 样式
+.message {
+ .message-content {
+ max-width: 70%;
+ word-wrap: break-word;
+
+ &.user-message {
+ background: var(--bs-primary);
+ color: white;
+ border-radius: 18px 18px 4px 18px;
+ padding: 12px 16px;
+
+ .message-text {
+ margin: 0;
+ }
+ }
+
+ &.assistant-message {
+ background: var(--bs-light);
+ border: 1px solid var(--bs-border-color);
+ border-radius: 18px 18px 18px 4px;
+ padding: 12px 16px;
+
+ .streaming-markdown {
+ // Markdown 内容样式
+ h1, h2, h3, h4, h5, h6 {
+ margin-top: 16px;
+ margin-bottom: 8px;
+
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+
+ p {
+ margin-bottom: 8px;
+ line-height: 1.6;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // 代码块样式
+ pre {
+ background: #2d3748 !important;
+ border-radius: 8px;
+ margin: 12px 0;
+ overflow-x: auto;
+
+ code {
+ background: transparent !important;
+ color: #e2e8f0 !important;
+ padding: 0 !important;
+ }
+ }
+
+ // 内联代码样式
+ code {
+ background: var(--bs-secondary-bg);
+ color: var(--bs-danger);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 0.9em;
+ }
+
+ // 引用块样式
+ blockquote {
+ border-left: 4px solid var(--bs-primary);
+ margin-left: 0;
+ padding-left: 16px;
+ color: var(--bs-secondary);
+ font-style: italic;
+ }
+
+ // 列表样式
+ ul, ol {
+ padding-left: 20px;
+ margin-bottom: 12px;
+
+ li {
+ margin-bottom: 4px;
+ line-height: 1.5;
+ }
+ }
+
+ // 链接样式
+ a {
+ color: var(--bs-primary);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ color: var(--bs-primary-dark);
+ }
+ }
+
+ // 表格样式
+ .table-responsive {
+ margin: 12px 0;
+ border-radius: 8px;
+ overflow: hidden;
+ border: 1px solid var(--bs-border-color);
+
+ .table {
+ margin-bottom: 0;
+ font-size: 0.9em;
+
+ th {
+ background: var(--bs-secondary-bg);
+ border-top: none;
+ font-weight: 600;
+ }
+ }
+ }
+ }
+
+ // 消息操作按钮
+ .message-actions {
+ display: flex;
+ gap: 8px;
+ opacity: 0.7;
+ transition: opacity 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ .btn {
+ font-size: 0.8em;
+ padding: 4px 8px;
+ border-radius: 6px;
+
+ svg {
+ margin-right: 4px;
+ }
+ }
+ }
+
+ // 打字机控制按钮
+ .typewriter-controls {
+ opacity: 0.8;
+
+ .btn {
+ font-size: 0.8em;
+ padding: 4px 12px;
+ }
+ }
+ }
+ }
+}
+
+// 聊天窗口body的滚动样式
+.chat-window-body {
+ .chat-body {
+ padding: 16px;
+ max-height: calc(100vh - 200px);
+ overflow-y: auto;
+
+ // 自定义滚动条
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--bs-border-color);
+ border-radius: 3px;
+
+ &:hover {
+ background: var(--bs-secondary);
+ }
+ }
+ }
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+ .message .message-content {
+ max-width: 85%;
+
+ &.user-message, &.assistant-message {
+ padding: 10px 12px;
+ font-size: 0.9em;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss
index b115c66..3dfcbbd 100644
--- a/src/styles/Inbox.scss
+++ b/src/styles/Inbox.scss
@@ -105,15 +105,28 @@
flex-flow: row nowrap;
gap: 0.5rem;
align-items: center;
+ width: 100%;
+ overflow: hidden;
+
.list-item-left-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
overflow: hidden;
+ flex-shrink: 0;
+ background-color: $primary-150;
}
.list-item-info {
.list-message {
- color: $neutral-700;
+ color: $neutral-900;
+ width: 12rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ font-size: 0.875rem;
}
}
}
@@ -172,6 +185,18 @@
border-radius: 50%;
overflow: hidden;
}
+ .chat-window-header-left-info {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ gap: 1rem;
+ .chat-window-header-left-info-product {
+ font-weight: 400;
+ font-size: 0.875rem;
+ padding: 6px 10px;
+ background-color: $neutral-200;
+ }
+ }
}
.chat-window-header-right {
@@ -267,7 +292,8 @@
width: 300px;
flex-shrink: 0;
overflow-y: auto;
-
+ align-items: flex-end;
+
.chat-details-header {
display: flex;
flex-flow: column nowrap;
@@ -275,6 +301,7 @@
gap: 1rem;
border-bottom: 1px solid $neutral-200;
padding-bottom: 1rem;
+ width: 100%;
.chat-header-title {
display: flex;
@@ -296,10 +323,16 @@
border-radius: 50%;
overflow: hidden;
background: $primary-150;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
}
}
}
.chat-detail-header-infos {
+ width: 100%;
display: flex;
flex-flow: column nowrap;
gap: 0.5rem;
@@ -318,6 +351,7 @@
}
}
.chat-detail-summary {
+ width: 100%;
display: flex;
flex-flow: column nowrap;
gap: 0.5rem;
@@ -334,6 +368,7 @@
}
}
.chat-detail-generate {
+ width: 100%;
display: flex;
flex-flow: column nowrap;
padding: 1rem 0;
@@ -372,11 +407,11 @@
padding: 1.5rem;
display: flex;
flex-flow: column nowrap;
- gap: .875rem;
- box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1F;
+ gap: 0.875rem;
+ box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f;
max-height: 380px;
height: fit-content;
-
+
.template-item-name {
font-size: 1.25rem;
font-weight: 700;
+ 