pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix：Text color in Floating Widget (Intercom-style) #10624 (#10639)

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

Fix：Text color in Floating Widget (Intercom-style)  #10624

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2025-10-17 18:48:47 +08:00
committed by GitHub
parent 685114d253
commit 8123942ec1
1 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/components/floating-chat-widget.tsx
View File

@ -1,11 +1,11 @@
import PdfDrawer from '@/components/pdf-drawer';
import { useClickDrawer } from '@/components/pdf-drawer/hooks';
import { MessageType, SharedFrom } from '@/constants/chat'; import { MessageType, SharedFrom } from '@/constants/chat';
import { useFetchNextConversationSSE } from '@/hooks/chat-hooks'; import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
import { useFetchFlowSSE } from '@/hooks/flow-hooks'; import { useFetchFlowSSE } from '@/hooks/flow-hooks';
import { useFetchExternalChatInfo } from '@/hooks/use-chat-request'; import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
import { useClickDrawer } from '@/components/pdf-drawer/hooks';
import i18n from '@/locales/config'; import i18n from '@/locales/config';
import { MessageCircle, Minimize2, Send, X } from 'lucide-react'; import { MessageCircle, Minimize2, Send, X } from 'lucide-react';
import PdfDrawer from '@/components/pdf-drawer';
import React, { import React, {
useCallback, useCallback,
useEffect, useEffect,
@ -234,7 +234,7 @@ const FloatingChatWidget = () => {
const syntheticEvent = { const syntheticEvent = {
target: { value: inputValue }, target: { value: inputValue },
currentTarget: { value: inputValue }, currentTarget: { value: inputValue },
preventDefault: () => { }, preventDefault: () => {},
} as any; } as any;
handleInputChange(syntheticEvent); handleInputChange(syntheticEvent);
@ -311,6 +311,7 @@ const FloatingChatWidget = () => {
className={`fixed bottom-6 right-6 z-50 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} className={`fixed bottom-6 right-6 z-50 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
> >
<button <button
type="button"
onClick={() => { onClick={() => {
const newIsOpen = !isOpen; const newIsOpen = !isOpen;
setIsOpen(newIsOpen); setIsOpen(newIsOpen);
@ -325,8 +326,9 @@ const FloatingChatWidget = () => {
'*', '*',
); );
}} }}
className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${isOpen ? 'scale-95' : 'scale-100 hover:scale-105' className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${
}`} isOpen ? 'scale-95' : 'scale-100 hover:scale-105'
}`}
> >
<div <div
className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`} className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`}
@ -352,9 +354,11 @@ const FloatingChatWidget = () => {
className={`fixed bottom-6 right-6 z-50 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} className={`fixed bottom-6 right-6 z-50 transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
> >
<button <button
type="button"
onClick={toggleChat} onClick={toggleChat}
className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${isOpen ? 'scale-95' : 'scale-100 hover:scale-105' className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${
}`} isOpen ? 'scale-95' : 'scale-100 hover:scale-105'
}`}
> >
<div <div
className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`} className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`}
@ -431,10 +435,11 @@ const FloatingChatWidget = () => {
className={`flex ${message.role === MessageType.User ? 'justify-end' : 'justify-start'}`} className={`flex ${message.role === MessageType.User ? 'justify-end' : 'justify-start'}`}
> >
<div <div
className={`max-w-[280px] px-4 py-2 rounded-2xl ${message.role === MessageType.User className={`max-w-[280px] px-4 py-2 rounded-2xl ${
? 'bg-blue-600 text-white rounded-br-md' message.role === MessageType.User
: 'bg-gray-100 text-gray-800 rounded-bl-md' ? 'bg-blue-600 text-white rounded-br-md'
}`} : 'bg-gray-100 text-gray-800 rounded-bl-md'
}`}
> >
{message.role === MessageType.User ? ( {message.role === MessageType.User ? (
<p className="text-sm leading-relaxed whitespace-pre-wrap"> <p className="text-sm leading-relaxed whitespace-pre-wrap">
@ -444,7 +449,13 @@ const FloatingChatWidget = () => {
<FloatingChatWidgetMarkdown <FloatingChatWidgetMarkdown
loading={false} loading={false}
content={message.content} content={message.content}
reference={message.reference || { doc_aggs: [], chunks: [], total: 0 }} reference={
message.reference || {
doc_aggs: [],
chunks: [],
total: 0,
}
}
clickDocumentButton={clickDocumentButton} clickDocumentButton={clickDocumentButton}
/> />
)} )}
@ -486,12 +497,13 @@ const FloatingChatWidget = () => {
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
placeholder="Type your message..." placeholder="Type your message..."
rows={1} rows={1}
className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
style={{ minHeight: '44px', maxHeight: '120px' }} style={{ minHeight: '44px', maxHeight: '120px' }}
disabled={hasError || sendLoading} disabled={hasError || sendLoading}
/> />
</div> </div>
<button <button
type="button"
onClick={handleSendMessage} onClick={handleSendMessage}
disabled={!inputValue.trim() || sendLoading} disabled={!inputValue.trim() || sendLoading}
className="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" className="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
@ -512,7 +524,7 @@ const FloatingChatWidget = () => {
/> />
</> </>
); );
} // Full mode - render everything together (original behavior) } // Full mode - render everything together (original behavior)
return ( return (
<div <div
className={`transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} className={`transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
@ -520,8 +532,9 @@ const FloatingChatWidget = () => {
{/* Chat Widget Container */} {/* Chat Widget Container */}
{isOpen && ( {isOpen && (
<div <div
className={`fixed bottom-24 right-6 z-50 bg-blue-600 rounded-2xl transition-all duration-300 ease-out ${isMinimized ? 'h-16' : 'h-[500px]' className={`fixed bottom-24 right-6 z-50 bg-blue-600 rounded-2xl transition-all duration-300 ease-out ${
} w-[380px] overflow-hidden`} isMinimized ? 'h-16' : 'h-[500px]'
} w-[380px] overflow-hidden`}
> >
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-t-2xl"> <div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-t-2xl">
@ -540,12 +553,14 @@ const FloatingChatWidget = () => {
</div> </div>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<button <button
type="button"
onClick={minimizeChat} onClick={minimizeChat}
className="p-1.5 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors" className="p-1.5 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
> >
<Minimize2 size={16} /> <Minimize2 size={16} />
</button> </button>
<button <button
type="button"
onClick={toggleChat} onClick={toggleChat}
className="p-1.5 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors" className="p-1.5 hover:bg-white hover:bg-opacity-20 rounded-full transition-colors"
> >
@ -592,10 +607,11 @@ const FloatingChatWidget = () => {
className={`flex ${message.role === MessageType.User ? 'justify-end' : 'justify-start'}`} className={`flex ${message.role === MessageType.User ? 'justify-end' : 'justify-start'}`}
> >
<div <div
className={`max-w-[280px] px-4 py-2 rounded-2xl ${message.role === MessageType.User className={`max-w-[280px] px-4 py-2 rounded-2xl ${
? 'bg-blue-600 text-white rounded-br-md' message.role === MessageType.User
: 'bg-gray-100 text-gray-800 rounded-bl-md' ? 'bg-blue-600 text-white rounded-br-md'
}`} : 'bg-gray-100 text-gray-800 rounded-bl-md'
}`}
> >
{message.role === MessageType.User ? ( {message.role === MessageType.User ? (
<p className="text-sm leading-relaxed whitespace-pre-wrap"> <p className="text-sm leading-relaxed whitespace-pre-wrap">
@ -605,7 +621,13 @@ const FloatingChatWidget = () => {
<FloatingChatWidgetMarkdown <FloatingChatWidgetMarkdown
loading={false} loading={false}
content={message.content} content={message.content}
reference={message.reference || { doc_aggs: [], chunks: [], total: 0 }} reference={
message.reference || {
doc_aggs: [],
chunks: [],
total: 0,
}
}
clickDocumentButton={clickDocumentButton} clickDocumentButton={clickDocumentButton}
/> />
)} )}
@ -650,7 +672,7 @@ const FloatingChatWidget = () => {
onKeyPress={handleKeyPress} onKeyPress={handleKeyPress}
placeholder="Type your message..." placeholder="Type your message..."
rows={1} rows={1}
className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
style={{ minHeight: '44px', maxHeight: '120px' }} style={{ minHeight: '44px', maxHeight: '120px' }}
disabled={hasError || sendLoading} disabled={hasError || sendLoading}
/> />
@ -672,9 +694,11 @@ const FloatingChatWidget = () => {
{/* Floating Button */} {/* Floating Button */}
<div className="fixed bottom-6 right-6 z-50"> <div className="fixed bottom-6 right-6 z-50">
<button <button
type="button"
onClick={toggleChat} onClick={toggleChat}
className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${isOpen ? 'scale-95' : 'scale-100 hover:scale-105' className={`w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all duration-300 flex items-center justify-center group ${
}`} isOpen ? 'scale-95' : 'scale-100 hover:scale-105'
}`}
> >
<div <div
className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`} className={`transition-transform duration-300 ${isOpen ? 'rotate-45' : 'rotate-0'}`}