diff --git a/CHANGELOG.md b/CHANGELOG.md index 176b58f..3accf99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,11 @@ and this project adheres to ## [Unreleased] -- ✨(ui) fix retour global ui +- 🎨(ui) retour ui sources files ### Changed +- ✨(ui) fix retour global ui - 🐛(fix) broken staging css - 🎨(alpha) adjustment for alpha version - ✨(ui) delete flex message diff --git a/src/frontend/apps/conversations/src/features/chat/components/AttachmentList.tsx b/src/frontend/apps/conversations/src/features/chat/components/AttachmentList.tsx index 24b5278..cb72179 100644 --- a/src/frontend/apps/conversations/src/features/chat/components/AttachmentList.tsx +++ b/src/frontend/apps/conversations/src/features/chat/components/AttachmentList.tsx @@ -38,7 +38,9 @@ export const AttachmentList = ({ onRemove(idx); } }; - + if (!name) { + return null; + } return ( { + const container = chatContainerRef.current; + if (!container) { + return; + } + + const handleScroll = () => { + const { scrollTop, scrollHeight, clientHeight } = container; + const isAtBottom = scrollHeight - scrollTop - clientHeight < 50; + + if (isAtBottom) { + setUserScrolledUp(false); + } else { + setUserScrolledUp(true); + } + }; + + container.addEventListener('scroll', handleScroll); + return () => container.removeEventListener('scroll', handleScroll); + }, []); + const [initialConversationMessages, setInitialConversationMessages] = useState(undefined); const [pendingFirstMessage, setPendingFirstMessage] = useState<{ @@ -78,6 +100,7 @@ export const Chat = ({ const [streamingMessageHeight, setStreamingMessageHeight] = useState< number | null >(null); + const [userScrolledUp, setUserScrolledUp] = useState(false); const { mutate: createChatConversation } = useCreateChatConversation(); @@ -129,7 +152,7 @@ export const Chat = ({ const stopGeneration = async () => { stopChat(); - const response = await fetchAPI(`chats/${conversationId}/stop-steaming/`, { + const response = await fetchAPI(`chats/${conversationId}/stop-streaming/`, { method: 'POST', }); @@ -230,7 +253,8 @@ export const Chat = ({ if ( hasInitialized && - (status === 'streaming' || status === 'submitted') + (status === 'streaming' || status === 'submitted') && + !userScrolledUp ) { const lastUserMessage = userMessages[userMessages.length - 1]; if (lastUserMessage) { @@ -251,7 +275,13 @@ export const Chat = ({ } } } - }, [messages, status, hasInitialized, calculateStreamingHeight]); + }, [ + messages, + status, + hasInitialized, + calculateStreamingHeight, + userScrolledUp, + ]); // Synchronize conversationId state with prop when it changes (e.g., after navigation) useEffect(() => { @@ -580,6 +610,7 @@ export const Chat = ({ $theme="greyscale" $variation="550" $size="16px" + className="action-chat-button-icon" /> {!isMobile && ( @@ -589,41 +620,48 @@ export const Chat = ({ {message.parts?.some( (part) => part.type === 'source', - ) && ( - openSources(message.id)} - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - openSources(message.id); - } - }} - role="button" - tabIndex={0} - > - - {!isMobile && ( - { + const sourceCount = + message.parts?.filter( + (part) => part.type === 'source', + ).length || 0; + return ( + openSources(message.id)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + openSources(message.id); + } + }} + role="button" + tabIndex={0} > - {!isSourceOpen - ? t('Show sources') - : t('Hide sources')} - - )} - - )} + + + {t('Show') + + ` ${sourceCount} ` + + t('sources')} + + + ); + })()} )} {message.parts && isSourceOpen === message.id && ( diff --git a/src/frontend/apps/conversations/src/features/chat/components/SourceItem.tsx b/src/frontend/apps/conversations/src/features/chat/components/SourceItem.tsx index 9b8dd24..28ecd95 100644 --- a/src/frontend/apps/conversations/src/features/chat/components/SourceItem.tsx +++ b/src/frontend/apps/conversations/src/features/chat/components/SourceItem.tsx @@ -8,6 +8,9 @@ const styles: Record = { color: '#222631', fontWeight: '500', whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + display: 'block', }, }; @@ -124,32 +127,44 @@ export const SourceItem: React.FC = ({ url }) => { return ( - {renderFavicon()} - + {url.startsWith('http') ? ( + {renderFavicon()} + {new URL(url).hostname} - {title && title.length > 100 - ? `${title.substring(0, 50)}...${title.substring(title.length - 20)}` - : title} + {title} ) : ( diff --git a/src/frontend/apps/conversations/src/features/chat/components/SourceItemList.tsx b/src/frontend/apps/conversations/src/features/chat/components/SourceItemList.tsx index 6b86564..6bc7371 100644 --- a/src/frontend/apps/conversations/src/features/chat/components/SourceItemList.tsx +++ b/src/frontend/apps/conversations/src/features/chat/components/SourceItemList.tsx @@ -19,7 +19,7 @@ export const SourceItemList: React.FC = ({ parts }) => { $padding={{ all: 'sm' }} $gap="4px" $css={` - border: 1px solid var(--c--theme--colors--greyscale-200); + border: 1px solid var(--c--theme--colors--greyscale-100); border-radius: 8px; margin-top: 0.5rem; overflow: hidden; diff --git a/src/frontend/apps/conversations/src/pages/globals.css b/src/frontend/apps/conversations/src/pages/globals.css index 22c1a9e..a4e6329 100644 --- a/src/frontend/apps/conversations/src/pages/globals.css +++ b/src/frontend/apps/conversations/src/pages/globals.css @@ -60,7 +60,8 @@ nextjs-portal { } .c__button--bordered, -.c__button--bordered:hover { +.c__button--bordered:hover, +.c__button--bordered:focus { border: 1px solid var(--c--theme--colors--greyscale-200) !important; background-color: #fff !important; } @@ -80,7 +81,8 @@ nextjs-portal { font-weight: 500 !important; cursor: pointer !important; background-color: inherit !important; - z-index: 100 !important; + border: none !important; + z-index: 100; font-size: 12px !important; padding: 4px !important; padding-right: 9px !important; @@ -96,7 +98,7 @@ nextjs-portal { padding: 9px !important; } -.c__button--neutral.action-chat-button span, +.c__button--neutral.action-chat-button .action-chat-button-icon, .c__button--neutral.research-web-button .c__button__icon span, .c__button--neutral.attach-file-button .c__button__icon span { @media (width <= 768px) { @@ -104,8 +106,15 @@ nextjs-portal { } } -.c__button--neutral:hover { +.c__button--neutral:hover, +.c__button--neutral:active, +.action-chat-button--open { background-color: #f2f5f4 !important; + border: none !important; +} + +.c__button--neutral:active { + background-color: inherit !important; } ul a { @@ -139,6 +148,7 @@ ul a:hover { .c__button--info:hover, .c__button--info:active, .c__button--info:focus { + outline: none !important; background-color: #b7d7ff !important; color: #265eaa !important; }