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

48
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,
@ -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,7 +326,8 @@ 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
@ -352,8 +354,10 @@ 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
@ -431,7 +435,8 @@ 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 ${
message.role === MessageType.User
? 'bg-blue-600 text-white rounded-br-md' ? 'bg-blue-600 text-white rounded-br-md'
: 'bg-gray-100 text-gray-800 rounded-bl-md' : 'bg-gray-100 text-gray-800 rounded-bl-md'
}`} }`}
@ -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"
@ -520,7 +532,8 @@ 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 ${
isMinimized ? 'h-16' : 'h-[500px]'
} w-[380px] overflow-hidden`} } w-[380px] overflow-hidden`}
> >
{/* Header */} {/* Header */}
@ -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,7 +607,8 @@ 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 ${
message.role === MessageType.User
? 'bg-blue-600 text-white rounded-br-md' ? 'bg-blue-600 text-white rounded-br-md'
: 'bg-gray-100 text-gray-800 rounded-bl-md' : 'bg-gray-100 text-gray-800 rounded-bl-md'
}`} }`}
@ -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,8 +694,10 @@ 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