= {
export type QuickSearchProps = {
onFilter?: (str: string) => void;
+ onClear?: () => void;
inputValue?: string;
inputContent?: ReactNode;
showInput?: boolean;
@@ -35,6 +36,7 @@ export type QuickSearchProps = {
export const QuickSearch = ({
onFilter,
+ onClear,
inputContent,
inputValue,
loading,
@@ -48,24 +50,23 @@ export const QuickSearch = ({
return (
<>
-
-
- {showInput && (
-
- {inputContent}
-
- )}
-
- {children}
-
-
-
+
+ {showInput && (
+
+ {inputContent}
+
+ )}
+
+ {children}
+
+
);
};
diff --git a/src/frontend/apps/conversations/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/conversations/src/components/quick-search/QuickSearchGroup.tsx
index 33cffcf..33a2a08 100644
--- a/src/frontend/apps/conversations/src/components/quick-search/QuickSearchGroup.tsx
+++ b/src/frontend/apps/conversations/src/components/quick-search/QuickSearchGroup.tsx
@@ -1,7 +1,11 @@
import { Command } from 'cmdk';
import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
+import { Text } from '../Text';
import { QuickSearchData } from './QuickSearch';
import { QuickSearchItem } from './QuickSearchItem';
@@ -17,13 +21,22 @@ export const QuickSearchGroup = ({
onSelect,
renderElement,
}: Props) => {
+ const { t } = useTranslation();
+ const { spacingsTokens } = useCunninghamTheme();
+
return (
-
-
+
+
+
+ {t('Search results')}
+
+
{group.startActions?.map((action, index) => {
return (
({
);
})}
{group.emptyString && group.elements.length === 0 && (
- {group.emptyString}
+
+ {group.emptyString}
+
)}
diff --git a/src/frontend/apps/conversations/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/conversations/src/components/quick-search/QuickSearchInput.tsx
index 9ab52f5..8455d0b 100644
--- a/src/frontend/apps/conversations/src/components/quick-search/QuickSearchInput.tsx
+++ b/src/frontend/apps/conversations/src/components/quick-search/QuickSearchInput.tsx
@@ -1,4 +1,3 @@
-import { Loader } from '@openfun/cunningham-react';
import { Command } from 'cmdk';
import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
@@ -8,6 +7,7 @@ import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
import { Icon } from '../Icon';
+import { Loader } from '../Loader';
type Props = {
loading?: boolean;
@@ -16,6 +16,7 @@ type Props = {
placeholder?: string;
children?: ReactNode;
withSeparator?: boolean;
+ onClear?: () => void;
};
export const QuickSearchInput = ({
loading,
@@ -24,6 +25,7 @@ export const QuickSearchInput = ({
placeholder,
children,
withSeparator: separator = true,
+ onClear,
}: Props) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
@@ -42,16 +44,30 @@ export const QuickSearchInput = ({
{!loading && }
- {loading && (
-
-
-
- )}
+ {loading && }
+ 0 && onClear ? 1 : 0};
+ transition: opacity 0.3s cubic-bezier(1, 0, 0, 1);
+ top: 10px;
+ right: 10px;
+ z-index: 1000;`}
+ onClick={onClear}
+ aria-label={t('Clear search')}
+ />
- {separator && }
);
};
diff --git a/src/frontend/apps/conversations/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/conversations/src/components/quick-search/QuickSearchStyle.tsx
index b6fa0ad..80232d3 100644
--- a/src/frontend/apps/conversations/src/components/quick-search/QuickSearchStyle.tsx
+++ b/src/frontend/apps/conversations/src/components/quick-search/QuickSearchStyle.tsx
@@ -9,25 +9,18 @@ export const QuickSearchStyle = createGlobalStyle`
overflow: hidden;
transition: transform 100ms ease;
outline: none;
+ border: none;
}
[cmdk-input] {
border: none;
- width: 100%;
- font-size: 17px;
- padding: 8px;
- background: white;
- outline: none;
- color: var(--c--theme--colors--greyscale-1000);
- border-radius: 0;
&::placeholder {
- color: var(--c--theme--colors--greyscale-500);
+ font-size: 14px;
+ color: #626A80;
}
}
-
-
[cmdk-item] {
content-visibility: auto;
cursor: pointer;
@@ -96,7 +89,7 @@ export const QuickSearchStyle = createGlobalStyle`
[cmdk-separator] {
height: 1px;
width: 100%;
- background: var(--c--theme--colors--greyscale-500);
+ background: transparent;
margin: 4px 0;
}
@@ -105,18 +98,13 @@ export const QuickSearchStyle = createGlobalStyle`
}
[cmdk-group-heading] {
+ padding: 0 var(--c--theme--spacings--xs);
user-select: none;
- font-size: var(--c--theme--font--sizes--sm);
+ font-size: 12px;
color: var(--c--theme--colors--greyscale-700);
- font-weight: bold;
-
- display: flex;
- align-items: center;
+ font-weight: 700;;
margin-bottom: var(--c--theme--spacings--xs);
}
-
- [cmdk-empty] {
- }
}
.c__modal__scroller:has(.quick-search-container),
diff --git a/src/frontend/apps/conversations/src/core/AppProvider.tsx b/src/frontend/apps/conversations/src/core/AppProvider.tsx
index 03ce509..bf6a223 100644
--- a/src/frontend/apps/conversations/src/core/AppProvider.tsx
+++ b/src/frontend/apps/conversations/src/core/AppProvider.tsx
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
+import { ToastProvider } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Auth, KEY_AUTH, setAuthUrl } from '@/features/auth';
import { useResponsiveStore } from '@/stores/';
@@ -63,7 +64,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
- {children}
+
+ {children}
+
diff --git a/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.css b/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.css
index 2fdb932..09d6f1b 100644
--- a/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.css
@@ -19,8 +19,9 @@
--c--theme--colors--info-700: #273961;
--c--theme--colors--info-800: #222a3f;
--c--theme--colors--info-900: #1d2437;
+ --c--theme--colors--greyscale-050: #eaecf0;
--c--theme--colors--greyscale-100: #eee;
- --c--theme--colors--greyscale-200: #e5e5e5;
+ --c--theme--colors--greyscale-200: #d9dde6;
--c--theme--colors--greyscale-300: #cecece;
--c--theme--colors--greyscale-400: #929292;
--c--theme--colors--greyscale-500: #7c7c7c;
@@ -36,7 +37,7 @@
--c--theme--colors--primary-500: #6a6af4;
--c--theme--colors--primary-600: #313178;
--c--theme--colors--primary-700: #272747;
- --c--theme--colors--primary-800: #000091;
+ --c--theme--colors--primary-800: #3e5de7;
--c--theme--colors--primary-900: #21213f;
--c--theme--colors--success-100: #dffee6;
--c--theme--colors--success-200: #b8fec9;
@@ -65,19 +66,18 @@
--c--theme--colors--danger-700: #642626;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #391c1c;
- --c--theme--colors--primary-text: #000091;
+ --c--theme--colors--primary-text: #4c6cef;
--c--theme--colors--success-text: #1f8d49;
--c--theme--colors--warning-text: #d64d00;
--c--theme--colors--danger-text: #fff;
--c--theme--colors--primary-050: #f5f5fe;
--c--theme--colors--primary-150: #f4f4fd;
--c--theme--colors--greyscale-text: #303c4b;
- --c--theme--colors--greyscale-050: #f6f6f6;
--c--theme--colors--greyscale-250: #ddd;
--c--theme--colors--greyscale-350: #ddd;
--c--theme--colors--greyscale-750: #353535;
--c--theme--colors--greyscale-950: #1e1e1e;
- --c--theme--colors--greyscale-1000: #161616;
+ --c--theme--colors--greyscale-1000: #2a2f3c;
--c--theme--colors--danger-050: #fff4f4;
--c--theme--colors--blue-500: #417dc4;
--c--theme--colors--brown-500: #bd987a;
@@ -205,10 +205,8 @@
--c--components--button--medium-text-height: 40px;
--c--components--button--border-radius: 4px;
--c--components--button--small-height: 26px;
- --c--components--button--primary--background--color: var(
- --c--theme--colors--primary-text
- );
- --c--components--button--primary--background--color-hover: #1212ff;
+ --c--components--button--primary--background--color: #3e5de6;
+ --c--components--button--primary--background--color-hover: #2944c2;
--c--components--button--primary--background--color-active: #2323ff;
--c--components--button--primary--background--color-disabled: var(
--c--theme--colors--greyscale-100
@@ -220,9 +218,7 @@
--c--components--button--primary--disabled: var(
--c--theme--colors--greyscale-500
);
- --c--components--button--primary-text--background--color: var(
- --c--theme--colors--primary-text
- );
+ --c--components--button--primary-text--background--color: #3e5de6;
--c--components--button--primary-text--background--color-hover: var(
--c--theme--colors--greyscale-100
);
@@ -491,7 +487,7 @@
--c--components--home-proconnect: false;
--c--components--beta: false;
--c--components--image-system-filter: ;
- --c--components--favicon--ico: /assets/favicon-light.ico;
+ --c--components--favicon--ico: /assets/favicon.ico;
--c--components--favicon--png-light: /assets/favicon-light.png;
--c--components--favicon--png-dark: /assets/favicon-dark.png;
}
diff --git a/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.ts
index a547d65..5456a90 100644
--- a/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/conversations/src/cunningham/cunningham-tokens.ts
@@ -28,6 +28,7 @@ export const tokens = {
'greyscale-300': '#CECECE',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
+ 'greyscale-550': '#626A80',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-800': '#2A2A2A',
@@ -69,7 +70,7 @@ export const tokens = {
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#391C1C',
- 'primary-text': '#000091',
+ 'primary-text': '#314ddf',
'success-text': '#1f8d49',
'warning-text': '#d64d00',
'danger-text': '#FFF',
@@ -221,7 +222,7 @@ export const tokens = {
'border-radius': '4px',
'small-height': '26px',
primary: {
- 'background--color': '#000091',
+ 'background--color': '#3E5DE7',
'background--color-hover': '#1212ff',
'background--color-active': '#2323ff',
'background--color-disabled': '#eee',
@@ -232,13 +233,13 @@ export const tokens = {
disabled: '#7C7C7C',
},
'primary-text': {
- 'background--color': '#000091',
+ 'background--color': '#3E5DE7',
'background--color-hover': '#eee',
'background--color-active': '#ECECFE',
'background--color-focus-visible': '#fff',
'background--color-disabled': '#fff',
- color: '#000091',
- 'color-hover': '#000091',
+ color: '#3E5DE7',
+ 'color-hover': '#3E5DE7',
disabled: '#929292',
},
secondary: {
@@ -268,11 +269,11 @@ export const tokens = {
},
danger: {
'color-hover': 'white',
- 'background--color': '#CE0500',
+ 'background--color': '#626A80',
'background--color-hover': '#FF2725',
'background--color-focus-visible': '#CE0500',
'background--color-disabled': '#eee',
- 'color-disabled': '#929292',
+ 'color-disabled': '#626A80',
},
},
datagrid: {
@@ -381,7 +382,7 @@ export const tokens = {
'greyscale-200': '#303C4B',
'greyscale-300': '#555F6B',
'greyscale-400': '#79818A',
- 'greyscale-500': '#9EA3AA',
+ 'greyscale-500': '#6D778C',
'greyscale-600': '#C2C6CA',
'greyscale-700': '#E7E8EA',
'greyscale-800': '#F3F4F4',
diff --git a/src/frontend/apps/conversations/src/features/auth/components/Auth.tsx b/src/frontend/apps/conversations/src/features/auth/components/Auth.tsx
index addb481..d32463f 100644
--- a/src/frontend/apps/conversations/src/features/auth/components/Auth.tsx
+++ b/src/frontend/apps/conversations/src/features/auth/components/Auth.tsx
@@ -1,8 +1,7 @@
-import { Loader } from '@openfun/cunningham-react';
import { useRouter } from 'next/router';
import { PropsWithChildren } from 'react';
-import { Box } from '@/components';
+import { Box, Loader } from '@/components';
import { useConfig } from '@/core';
import { HOME_URL } from '../conf';
diff --git a/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx b/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx
index e3c123d..0833060 100644
--- a/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx
+++ b/src/frontend/apps/conversations/src/features/auth/components/ButtonLogin.tsx
@@ -45,7 +45,7 @@ export const ProConnectButton = () => {
onClick={() => gotoLogin()}
aria-label={t('Proconnect Login')}
$css={css`
- background-color: var(--c--theme--colors--primary-text);
+ background-color: #000091;
&:hover {
background-color: var(--c--theme--colors--primary-action);
}
diff --git a/src/frontend/apps/conversations/src/features/chat-search/assets/illustration-docs-empty.png b/src/frontend/apps/conversations/src/features/chat-search/assets/illustration-docs-empty.png
deleted file mode 100644
index c3dbb6e..0000000
Binary files a/src/frontend/apps/conversations/src/features/chat-search/assets/illustration-docs-empty.png and /dev/null differ
diff --git a/src/frontend/apps/conversations/src/features/chat-search/components/ConversationSearchItem.tsx b/src/frontend/apps/conversations/src/features/chat-search/components/ConversationSearchItem.tsx
deleted file mode 100644
index a10a8f6..0000000
--- a/src/frontend/apps/conversations/src/features/chat-search/components/ConversationSearchItem.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Box, Icon } from '@/components';
-import { QuickSearchItemContent } from '@/components/quick-search/';
-import { ChatConversation } from '@/features/chat/types';
-import { SimpleConversationItem } from '@/features/left-panel/components/SimpleConversationItem';
-import { useResponsiveStore } from '@/stores';
-
-type ConversationSearchItemProps = {
- conversation: ChatConversation;
-};
-
-export const ConversationSearchItem = ({
- conversation,
-}: ConversationSearchItemProps) => {
- const { isDesktop } = useResponsiveStore();
- return (
-
-
-
-
-
-
- }
- right={
-
- }
- />
-
- );
-};
diff --git a/src/frontend/apps/conversations/src/features/chat-search/components/ConversationSearchModal.tsx b/src/frontend/apps/conversations/src/features/chat-search/components/ConversationSearchModal.tsx
deleted file mode 100644
index 11b6117..0000000
--- a/src/frontend/apps/conversations/src/features/chat-search/components/ConversationSearchModal.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Modal, ModalSize } from '@openfun/cunningham-react';
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { InView } from 'react-intersection-observer';
-import { useDebouncedCallback } from 'use-debounce';
-
-import { Box } from '@/components';
-import {
- QuickSearch,
- QuickSearchData,
- QuickSearchGroup,
-} from '@/components/quick-search';
-import { useInfiniteConversations } from '@/features/chat/api/useConversations';
-import { ChatConversation } from '@/features/chat/types';
-import { useResponsiveStore } from '@/stores';
-
-import EmptySearchIcon from '../assets/illustration-docs-empty.png';
-
-import { ConversationSearchItem } from './ConversationSearchItem';
-
-type ConversationSearchModalProps = {
- onClose: () => void;
- isOpen: boolean;
-};
-
-export const ConversationSearchModal = ({
- ...modalProps
-}: ConversationSearchModalProps) => {
- const { t } = useTranslation();
- const router = useRouter();
- const [search, setSearch] = useState('');
- const { isDesktop } = useResponsiveStore();
- const {
- data,
- isFetching,
- isRefetching,
- isLoading,
- fetchNextPage,
- hasNextPage,
- } = useInfiniteConversations({
- page: 1,
- title: search,
- });
- const loading = isFetching || isRefetching || isLoading;
- const handleInputSearch = useDebouncedCallback(setSearch, 300);
-
- const handleSelect = (conversation: ChatConversation) => {
- router.push(`/chat/${conversation.id}`);
- modalProps.onClose?.();
- };
-
- const conversationsData: QuickSearchData = useMemo(() => {
- const conversations = data?.pages.flatMap((page) => page.results) || [];
-
- return {
- groupName: conversations.length > 0 ? t('Select a conversation') : '',
- elements: search ? conversations : [],
- emptyString: t('No conversation found'),
- endActions: hasNextPage
- ? [{ content: void fetchNextPage()} /> }]
- : [],
- };
- }, [data, hasNextPage, fetchNextPage, t, search]);
-
- return (
-
-
-
-
- {search.length === 0 && (
-
-
-
- )}
- {search && (
- (
-
- )}
- />
- )}
-
-
-
-
- );
-};
diff --git a/src/frontend/apps/conversations/src/features/chat-search/components/index.ts b/src/frontend/apps/conversations/src/features/chat-search/components/index.ts
deleted file mode 100644
index e2720f8..0000000
--- a/src/frontend/apps/conversations/src/features/chat-search/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ConversationSearchModal';
diff --git a/src/frontend/apps/conversations/src/features/chat-search/index.ts b/src/frontend/apps/conversations/src/features/chat-search/index.ts
deleted file mode 100644
index 07635cb..0000000
--- a/src/frontend/apps/conversations/src/features/chat-search/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components';
diff --git a/src/frontend/apps/conversations/src/features/chat/api/useChat.tsx b/src/frontend/apps/conversations/src/features/chat/api/useChat.tsx
index be53da7..c52d877 100644
--- a/src/frontend/apps/conversations/src/features/chat/api/useChat.tsx
+++ b/src/frontend/apps/conversations/src/features/chat/api/useChat.tsx
@@ -14,6 +14,14 @@ const fetchAPIAdapter = (input: RequestInfo | URL, init?: RequestInit) => {
} else {
throw new Error('Unsupported input type for fetchAPIAdapter');
}
+
+ // Add force_web_search parameter if it's globally enabled
+ if ((window as { globalForceWebSearch?: boolean }).globalForceWebSearch) {
+ const urlObj = new URL(url);
+ urlObj.searchParams.set('force_web_search', 'true');
+ url = urlObj.toString();
+ }
+
return fetchAPI(url, init);
};
diff --git a/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx b/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx
index 10281a7..bd0e183 100644
--- a/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx
+++ b/src/frontend/apps/conversations/src/features/chat/components/Chat.tsx
@@ -4,26 +4,27 @@ import {
SourceUIPart,
ToolInvocationUIPart,
} from '@ai-sdk/ui-utils';
-import { Loader, Modal, ModalSize } from '@openfun/cunningham-react';
+import { Modal, ModalSize } from '@openfun/cunningham-react';
import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
-import Image from 'next/image';
import { useRouter } from 'next/router';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Markdown from 'react-markdown';
import rehypeKatex from 'rehype-katex';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
-import { Box, BoxButton, Icon, Text } from '@/components';
-import { DropdownMenu } from '@/components/DropdownMenu';
-import { useConfig } from '@/core';
-import { useAuth } from '@/features/auth';
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { Box, Icon, Loader, Text } from '@/components';
import { useChat } from '@/features/chat/api/useChat';
import { getConversation } from '@/features/chat/api/useConversation';
import { useCreateChatConversation } from '@/features/chat/api/useCreateConversation';
-import SourceItemList from '@/features/chat/components/SourceItemList';
+import { InputChat } from '@/features/chat/components/InputChat';
+import { SourceItemList } from '@/features/chat/components/SourceItemList';
import { ToolInvocationItem } from '@/features/chat/components/ToolInvocationItem';
+import { setChatContainerRef } from '@/features/chat/hooks/useChatScroll';
+import { useClipboard } from '@/hook';
+import { useResponsiveStore } from '@/stores';
import { usePendingChatStore } from '../stores/usePendingChatStore';
@@ -40,28 +41,39 @@ export const Chat = ({
initialConversationId: string | undefined;
}) => {
const { t } = useTranslation();
+ const copyToClipboard = useClipboard();
+ const { isDesktop } = useResponsiveStore();
const streamProtocol = 'data'; // or 'text'
+ const [forceWebSearch, setForceWebSearch] = useState(false);
const apiUrl = `chats/${initialConversationId}/conversation/?protocol=${streamProtocol}`;
const router = useRouter();
- const { user } = useAuth();
- const { data: conf } = useConfig();
const [files, setFiles] = useState(null);
+
const fileInputRef = useRef(null);
- const [isDragActive, setIsDragActive] = useState(false);
+ const chatContainerRef = useRef(null);
const [conversationId, setConversationId] = useState(initialConversationId);
const [chatErrorModal, setChatErrorModal] = useState<{
title: string;
message: string;
} | null>(null);
+ const [isSourceOpen, setIsSourceOpen] = useState(null);
+
+ // Définir la ref globale pour le hook useChatScroll
+ useEffect(() => {
+ setChatContainerRef(chatContainerRef);
+ }, []);
+
const [initialConversationMessages, setInitialConversationMessages] =
useState(undefined);
const [pendingFirstMessage, setPendingFirstMessage] = useState<{
event: React.FormEvent;
attachments?: FileList | null;
+ forceWebSearch?: boolean;
} | null>(null);
const [shouldAutoSubmit, setShouldAutoSubmit] = useState(false);
+ const [hasInitialized, setHasInitialized] = useState(false);
const { mutate: createChatConversation } = useCreateChatConversation();
@@ -90,6 +102,7 @@ export const Chat = ({
handleSubmit: baseHandleSubmit,
handleInputChange,
status,
+ stop: stopChat,
} = useChat({
id: conversationId,
initialMessages: initialConversationMessages,
@@ -99,10 +112,104 @@ export const Chat = ({
onError: onErrorChat,
});
+ // Scroll to bottom when new messages arrive
+ const scrollToBottom = useCallback(() => {
+ if (chatContainerRef.current) {
+ chatContainerRef.current.scrollTo({
+ top: chatContainerRef.current.scrollHeight,
+ behavior: hasInitialized ? 'smooth' : 'auto',
+ });
+ }
+ }, [hasInitialized]);
+
+ const stopGeneration = async () => {
+ stopChat();
+
+ const response = await fetchAPI(`chats/${conversationId}/stop-steaming/`, {
+ method: 'POST',
+ });
+
+ if (!response.ok) {
+ throw new APIError(
+ 'Failed to stop the conversation',
+ await errorCauses(response),
+ );
+ }
+ };
+
+ const toggleWebSearch = () => {
+ setForceWebSearch((prev) => {
+ const newValue = !prev;
+ // Update global state for the fetch adapter
+ (window as { globalForceWebSearch?: boolean }).globalForceWebSearch =
+ newValue;
+ return newValue;
+ });
+ };
+
+ const handleStop = () => {
+ void stopGeneration();
+ };
+
+ const handleSubmitWrapper = (event: React.FormEvent) => {
+ void handleSubmit(event);
+ };
+
+ const openSources = (messageId: string) => {
+ if (isSourceOpen === messageId) {
+ setIsSourceOpen(null);
+ return;
+ }
+ const message = messages.find((msg) => msg.id === messageId);
+ if (message?.parts) {
+ const sourceParts = message.parts.filter(
+ (part): part is SourceUIPart => part.type === 'source',
+ );
+ if (sourceParts.length > 0) {
+ setIsSourceOpen(messageId);
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (chatContainerRef.current) {
+ // Find the last user message
+ const userMessages = messages.filter((msg) => msg.role === 'user');
+ const lastUserMessage = userMessages[userMessages.length - 1];
+
+ if (lastUserMessage) {
+ // Find the element of the last user message
+ const messageElements =
+ chatContainerRef.current.querySelectorAll('[data-message-id]');
+ const lastUserMessageElement = Array.from(messageElements).find(
+ (el) => el.getAttribute('data-message-id') === lastUserMessage.id,
+ );
+
+ if (lastUserMessageElement) {
+ // Scroll to position the last user message at the very top
+ const messageTop = (lastUserMessageElement as HTMLElement).offsetTop;
+
+ chatContainerRef.current.scrollTo({
+ top: messageTop,
+ behavior: 'auto',
+ });
+ }
+ } else {
+ scrollToBottom();
+ }
+ }
+ }, [messages, hasInitialized, scrollToBottom]);
+
// Synchronize conversationId state with prop when it changes (e.g., after navigation)
useEffect(() => {
setConversationId(initialConversationId);
- }, [initialConversationId]);
+ // Reset input when conversation changes
+ if (initialConversationId !== conversationId) {
+ handleInputChange({
+ target: { value: '' },
+ } as React.ChangeEvent);
+ }
+ }, [initialConversationId, conversationId, handleInputChange]);
// On mount, if there is pending input/files, initialize state and set flag
useEffect(() => {
@@ -136,7 +243,7 @@ export const Chat = ({
preventDefault: () => {},
target: form,
} as unknown as React.FormEvent;
- handleSubmit(syntheticFormEvent);
+ void handleSubmit(syntheticFormEvent);
setShouldAutoSubmit(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -153,11 +260,13 @@ export const Chat = ({
});
if (!ignore) {
setInitialConversationMessages(conversation.messages);
+ setHasInitialized(true);
}
} catch {
// Optionally handle error (e.g., setInitialConversationMessages([]) or show error)
if (!ignore) {
setInitialConversationMessages([]);
+ setHasInitialized(true);
}
}
}
@@ -170,11 +279,32 @@ export const Chat = ({
}, [initialConversationId, pendingInput]);
// Custom handleSubmit to include attachments and handle chat creation
- const handleSubmit = (event: React.FormEvent) => {
+ const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
+
+ // Convert files to base64 if they exist
+ let attachments: Attachment[] = [];
+ if (files && files.length > 0) {
+ attachments = await Promise.all(
+ Array.from(files).map(async (file) => {
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.onload = () => {
+ resolve({
+ name: file.name,
+ contentType: file.type,
+ url: reader.result as string,
+ });
+ };
+ reader.readAsDataURL(file);
+ });
+ }),
+ );
+ }
+
if (!conversationId) {
// Save the event and files, then create the chat
- setPendingFirstMessage({ event, attachments: files });
+ setPendingFirstMessage({ event, attachments: files, forceWebSearch });
// Save input and files to Zustand store before navigation
setPendingChat(input, files);
void createChatConversation(
@@ -187,13 +317,18 @@ export const Chat = ({
// After setting the conversationId, submit the pending message
setTimeout(() => {
if (pendingFirstMessage) {
+ // Prepare options with attachments
+ const options: Record = {};
if (
pendingFirstMessage.attachments &&
pendingFirstMessage.attachments.length > 0
) {
- baseHandleSubmit(pendingFirstMessage.event, {
- experimental_attachments: pendingFirstMessage.attachments,
- });
+ options.experimental_attachments =
+ pendingFirstMessage.attachments;
+ }
+
+ if (Object.keys(options).length > 0) {
+ baseHandleSubmit(pendingFirstMessage.event, options);
} else {
baseHandleSubmit(pendingFirstMessage.event);
}
@@ -209,132 +344,290 @@ export const Chat = ({
);
return;
}
- if (files && files.length > 0) {
- baseHandleSubmit(event, { experimental_attachments: files });
+
+ // Prepare options with attachments
+ const options: Record = {};
+ if (attachments.length > 0) {
+ options.experimental_attachments = attachments;
+ }
+
+ if (Object.keys(options).length > 0) {
+ baseHandleSubmit(event, options);
} else {
baseHandleSubmit(event);
}
- setFiles(null);
- if (fileInputRef.current) {
- fileInputRef.current.value = '';
- }
+
+ // Attendre un peu avant de vider les fichiers pour s'assurer qu'ils sont traités
+ setTimeout(() => {
+ setFiles(null);
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ }, 100);
};
return (
-
+
1 ? 'calc(100vh - 62px)' : '0'};
+ max-height: ${messages.length > 1 ? 'calc(100vh - 62px)' : '0'};
+ `}
>
- {messages.map((message) => (
-
-
- {`${message.role === 'user' ? user?.full_name : message.role}:`}
-
-
- {message.content && (
- (
-
- ),
- }}
+ {messages.length > 0 && (
+
+ {messages.map((message) => (
+
+
- {message.content}
-
- )}
-
- {message.parts
- ?.filter(
- (part) =>
- part.type === 'reasoning' ||
- part.type === 'tool-invocation',
- )
- .map((part: ReasoningUIPart | ToolInvocationUIPart) =>
- part.type === 'reasoning' ? (
-
- {part.reasoning}
-
- ) : part.type === 'tool-invocation' ? (
-
- ) : null,
+ {message.content && (
+ ,
+ }}
+ >
+ {message.content}
+
)}
- {/* Show attachments if present */}
- {message.experimental_attachments?.map(
- (attachment: Attachment, index: number) =>
- attachment.contentType?.includes('image/') ? (
-
- ) : attachment.contentType?.includes('text/') ? (
-
- {attachment.url}
-
- ) : null,
- )}
- {/* Show sources if present */}
- {message.parts && (
- part.type === 'source',
+
+ {message.parts
+ ?.filter(
+ (part) =>
+ part.type === 'reasoning' ||
+ part.type === 'tool-invocation',
+ )
+ .map((part: ReasoningUIPart | ToolInvocationUIPart) =>
+ part.type === 'reasoning' ? (
+
+ {part.reasoning}
+
+ ) : part.type === 'tool-invocation' ? (
+
+ ) : null,
+ )}
+ {/* Show attachments if present */}
+ {message.experimental_attachments?.map(
+ (attachment: Attachment, index: number) =>
+ attachment.contentType?.includes('text/') ||
+ attachment.contentType?.includes('image/') ? (
+
+ {attachment.name}
+
+ ) : null,
)}
- />
- )}
+
+ {message.role !== 'user' && (
+
+ copyToClipboard(message.content)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ copyToClipboard(message.content);
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ >
+
+ {isDesktop && (
+
+ {t('Copy')}
+
+ )}
+
+ {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}
+ >
+
+ {isDesktop && (
+
+ {t('Show sources')}
+
+ )}
+
+ )}
+
+ )}
+ {message.parts && isSourceOpen === message.id && (
+ part.type === 'source',
+ )}
+ />
+ )}
+
-
+ ))}
- ))}
+ )}
{(status === 'streaming' || status === 'submitted') && (
-
- {t('Generating...')}
+
+
+ {t('Thinking...')}
+
)}
-
+
+
+
{
@@ -348,253 +641,6 @@ export const Chat = ({
>
{chatErrorModal?.message}
-
- {messages.length === 0 && (
-
-
- {t('Welcome to your assistant!')}
-
-
- {t('Start a conversation by typing a message below.')}
-
-
- )}
-
- {/* File preview */}
- {files && files.length > 0 && (
-
- {Array.from(files).map((file, idx) => {
- const { type, name } = file;
- const removeFile = () => {
- if (!files) {
- return;
- }
- const dt = new DataTransfer();
- Array.from(files).forEach((f, i) => {
- if (i !== idx) {
- dt.items.add(f);
- }
- });
- setFiles(dt.files.length > 0 ? dt.files : null);
- };
- if (type.startsWith('image/')) {
- return (
-
-
-
- {name}
-
-
-
-
-
- );
- } else if (type.startsWith('text/')) {
- return (
-
-
-
- {name}
-
-
-
-
-
- );
- }
- return null;
- })}
-
- )}
-
-