diff --git a/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx b/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx index b41c15db8f..e10c880fb1 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx @@ -1,7 +1,5 @@ import { useAgentChatContextOrThrow } from '@/ai/hooks/useAgentChatContextOrThrow'; -import { useAgentChatRequestBody } from '@/ai/hooks/useAgentChatRequestBody'; import { type ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { useChat } from '@ai-sdk/react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; @@ -46,22 +44,12 @@ const StyledErrorMessage = styled.div` type AIChatErrorMessageProps = { error: Error; records?: ObjectRecord[]; + isRetrying?: boolean; }; -export const AIChatErrorMessage = ({ - error, - records, -}: AIChatErrorMessageProps) => { +export const AIChatErrorMessage = ({ error }: AIChatErrorMessageProps) => { const theme = useTheme(); - const { chat } = useAgentChatContextOrThrow(); - const { buildRequestBody } = useAgentChatRequestBody(); - const { regenerate, status } = useChat({ chat }); - - const handleRetry = () => { - regenerate({ - body: buildRequestBody(records), - }); - }; + const { handleRetry, isStreaming } = useAgentChatContextOrThrow(); return ( @@ -79,7 +67,7 @@ export const AIChatErrorMessage = ({ size="small" Icon={IconRefresh} onClick={handleRetry} - disabled={status === 'streaming'} + disabled={isStreaming} title={t`Retry`} /> diff --git a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx index 362692cfb1..a95b922d7b 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatTab.tsx @@ -17,7 +17,7 @@ import { SendMessageButton } from '@/ai/components/internal/SendMessageButton'; import { SendMessageWithRecordsContextButton } from '@/ai/components/internal/SendMessageWithRecordsContextButton'; import { AI_CHAT_INPUT_ID } from '@/ai/constants/AiChatInputId'; import { useAIChatFileUpload } from '@/ai/hooks/useAIChatFileUpload'; -import { useAgentChat } from '@/ai/hooks/useAgentChat'; +import { useAgentChatContextOrThrow } from '@/ai/hooks/useAgentChatContextOrThrow'; import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { t } from '@lingui/core/macro'; @@ -70,7 +70,7 @@ export const AIChatTab = () => { messages, isStreaming, error, - } = useAgentChat(); + } = useAgentChatContextOrThrow(); const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValue( contextStoreCurrentObjectMetadataItemIdComponentState, diff --git a/packages/twenty-front/src/modules/ai/components/AgentChatProvider.tsx b/packages/twenty-front/src/modules/ai/components/AgentChatProvider.tsx index f22d5d9b20..66f04ec9d4 100644 --- a/packages/twenty-front/src/modules/ai/components/AgentChatProvider.tsx +++ b/packages/twenty-front/src/modules/ai/components/AgentChatProvider.tsx @@ -1,50 +1,25 @@ import { AgentChatContext } from '@/ai/contexts/AgentChatContext'; +import { useAgentChat } from '@/ai/hooks/useAgentChat'; import { useAgentChatData } from '@/ai/hooks/useAgentChatData'; -import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState'; -import { REST_API_BASE_URL } from '@/apollo/constant/rest-api-base-url'; -import { getTokenPair } from '@/apollo/utils/getTokenPair'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { Chat } from '@ai-sdk/react'; -import { DefaultChatTransport } from 'ai'; import { Suspense } from 'react'; -import { useRecoilValue } from 'recoil'; -import { type ExtendedUIMessage } from 'twenty-shared/ai'; import { FeatureFlagKey } from '~/generated/graphql'; -const createLoadingChat = () => - new Chat({ - transport: new DefaultChatTransport({ - api: `${REST_API_BASE_URL}/agent-chat/stream`, - headers: () => ({}), - }), - messages: [], - id: 'loading', - }); - const AgentChatProviderContent = ({ children, }: { children: React.ReactNode; }) => { const { uiMessages, isLoading } = useAgentChatData(); - const currentAIChatThread = useRecoilValue(currentAIChatThreadState); - - const chatConfig = isLoading - ? createLoadingChat() - : new Chat({ - transport: new DefaultChatTransport({ - api: `${REST_API_BASE_URL}/agent-chat/stream`, - headers: () => ({ - Authorization: `Bearer ${getTokenPair()?.accessOrWorkspaceAgnosticToken.token}`, - }), - }), - messages: uiMessages, - id: `${currentAIChatThread}-${uiMessages.length}`, - }); + const chatState = useAgentChat(uiMessages); + const combinedIsLoading = chatState.isLoading || isLoading; return ( {children} @@ -60,30 +35,14 @@ export const AgentChatProvider = ({ if (!isAiEnabled) { return ( - + {children} ); } return ( - - {children} - - } - > + {children} ); diff --git a/packages/twenty-front/src/modules/ai/components/internal/SendMessageButton.tsx b/packages/twenty-front/src/modules/ai/components/internal/SendMessageButton.tsx index 2e820012d7..392c4aa617 100644 --- a/packages/twenty-front/src/modules/ai/components/internal/SendMessageButton.tsx +++ b/packages/twenty-front/src/modules/ai/components/internal/SendMessageButton.tsx @@ -1,13 +1,8 @@ import { AI_CHAT_INPUT_ID } from '@/ai/constants/AiChatInputId'; -import { useAgentChat } from '@/ai/hooks/useAgentChat'; import { useAgentChatContextOrThrow } from '@/ai/hooks/useAgentChatContextOrThrow'; -import { useAgentChatRequestBody } from '@/ai/hooks/useAgentChatRequestBody'; -import { agentChatUploadedFilesState } from '@/ai/states/agentChatUploadedFilesState'; import { type ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement'; -import { useChat } from '@ai-sdk/react'; import { t } from '@lingui/core/macro'; -import { useRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; import { Button } from 'twenty-ui/input'; @@ -16,40 +11,14 @@ export const SendMessageButton = ({ }: { records?: ObjectRecord[]; }) => { - const { input, isLoading, handleInputChange } = useAgentChat(); - const { chat } = useAgentChatContextOrThrow(); - const { buildRequestBody } = useAgentChatRequestBody(); - const { sendMessage } = useChat({ chat }); - - const [agentChatUploadedFiles, setAgentChatUploadedFiles] = useRecoilState( - agentChatUploadedFilesState, - ); - - const handleSendMessage = () => { - if (input.trim() === '' || isLoading) { - return; - } - - sendMessage( - { - text: input, - files: agentChatUploadedFiles, - }, - { - body: buildRequestBody(records), - }, - ); - - handleInputChange(''); - setAgentChatUploadedFiles([]); - }; + const { handleSendMessage, isLoading, input } = useAgentChatContextOrThrow(); useHotkeysOnFocusedElement({ keys: [Key.Enter], callback: (event: KeyboardEvent) => { if (!event.ctrlKey && !event.metaKey) { event.preventDefault(); - handleSendMessage(); + handleSendMessage(records); } }, focusId: AI_CHAT_INPUT_ID, @@ -62,7 +31,7 @@ export const SendMessageButton = ({ return (