AI/ragflow
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git synced 2025-08-14 21:45:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify the background color of chat messages (#1262)

Browse Source 
### What problem does this PR solve?

feat: modify the background color of chat messages #1215

### Type of change

- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2024-06-24 18:23:22 +08:00 committed by GitHub
parent 80163c043e
commit 6c6f5a3a47
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/pages/chat/chat-container/index.less
View File

@ -24,20 +24,24 @@
.messageItemContentReverse { .messageItemContentReverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.messageTextBase() {
padding: 6px 10px;
border-radius: 8px;
& > p {
margin: 0;
}
}
.messageText { .messageText {
.chunkText(); .chunkText();
padding: 0 14px; .messageTextBase();
background-color: rgb(230, 230, 232); background-color: #e6f4ff;
word-break: break-all; word-break: break-all;
border-radius: 10px;
} }
.messageUserText { .messageUserText {
.chunkText(); .chunkText();
padding: 0 14px; .messageTextBase();
background-color: rgb(45, 100, 245); background-color: rgb(248, 247, 247);
word-break: break-all; word-break: break-all;
border-radius: 10px;
color: #fdfdfd;
text-align: justify; text-align: justify;
} }
.messageEmpty { .messageEmpty {

8
web/src/pages/chat/hooks.ts
View File

@ -36,6 +36,7 @@ import { getFileExtension } from '@/utils';
import { message } from 'antd'; import { message } from 'antd';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import omit from 'lodash/omit'; import omit from 'lodash/omit';
import trim from 'lodash/trim';
import { import {
ChangeEventHandler, ChangeEventHandler,
useCallback, useCallback,
@ -54,7 +55,6 @@ import {
} from './interface'; } from './interface';
import { ChatModelState } from './model'; import { ChatModelState } from './model';
import { isConversationIdExist } from './utils'; import { isConversationIdExist } from './utils';
import {public_path} from "@/utils/api";
export const useSelectCurrentDialog = () => { export const useSelectCurrentDialog = () => {
const currentDialog: IDialog = useSelector( const currentDialog: IDialog = useSelector(
@ -533,7 +533,7 @@ export const useHandleMessageInputChange = () => {
const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => { const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
const value = e.target.value; const value = e.target.value;
const nextValue = value.replaceAll('\\n', '\n').replaceAll('\\t', '\t'); const nextValue = value.replaceAll('\\n', '\n').replaceAll('\\t', '\t');
setValue(nextValue); setValue(trim(nextValue));
}; };
return { return {
@ -620,6 +620,8 @@ export const useSendMessage = (
}, [answer, addNewestAnswer]); }, [answer, addNewestAnswer]);
const handlePressEnter = useCallback(() => { const handlePressEnter = useCallback(() => {
if (trim(value) === '') return;
if (done) { if (done) {
setValue(''); setValue('');
handleSendMessage(value.trim()); handleSendMessage(value.trim());
@ -766,7 +768,7 @@ export const useGetSendButtonDisabled = () => {
}; };
export const useSendButtonDisabled = (value: string) => { export const useSendButtonDisabled = (value: string) => {
return value === ''; return trim(value) === '';
}; };
//#endregion //#endregion

18
web/src/pages/chat/share/index.less
View File

@ -30,20 +30,24 @@
.messageItemContentReverse { .messageItemContentReverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.messageTextBase() {
padding: 6px 10px;
border-radius: 8px;
& > p {
margin: 0;
}
}
.messageText { .messageText {
.chunkText(); .chunkText();
padding: 0 14px; .messageTextBase();
background-color: rgb(230, 230, 232); background-color: #e6f4ff;
word-break: break-all; word-break: break-all;
border-radius: 10px;
} }
.messageUserText { .messageUserText {
.chunkText(); .chunkText();
padding: 0 14px; .messageTextBase();
background-color: rgb(45, 100, 245); background-color: rgb(248, 247, 247);
word-break: break-all; word-break: break-all;
border-radius: 10px;
color: #fdfdfd;
text-align: justify; text-align: justify;
} }
.messageEmpty { .messageEmpty {

4
web/src/pages/chat/shared-hooks.ts
View File

@ -8,6 +8,7 @@ import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
import { IAnswer } from '@/interfaces/database/chat'; import { IAnswer } from '@/interfaces/database/chat';
import api from '@/utils/api'; import api from '@/utils/api';
import omit from 'lodash/omit'; import omit from 'lodash/omit';
import trim from 'lodash/trim';
import { import {
Dispatch, Dispatch,
SetStateAction, SetStateAction,
@ -134,7 +135,7 @@ export const useSelectCurrentSharedConversation = (conversationId: string) => {
}; };
export const useSendButtonDisabled = (value: string) => { export const useSendButtonDisabled = (value: string) => {
return value === ''; return trim(value) === '';
}; };
export const useSendSharedMessage = ( export const useSendSharedMessage = (
@ -205,6 +206,7 @@ export const useSendSharedMessage = (
}, [answer, addNewestAnswer]); }, [answer, addNewestAnswer]);
const handlePressEnter = useCallback(() => { const handlePressEnter = useCallback(() => {
if (trim(value) === '') return;
if (done) { if (done) {
setValue(''); setValue('');
addNewestConversation(value); addNewestConversation(value);