houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve AI agent chat, tool display, and workflow agent management (#17876)

Browse Source 
## Summary

- **Fix token renewal endpoint**: Use `/metadata` instead of `/graphql`
for token renewal in agent chat, fixing auth issues
- **Improve tool display**: Add `load_skills` support, show formatted
tool names (underscores → spaces) with finish/loading states, display
tool icons during loading, and support custom loading messages from tool
input
- **Refactor workflow agent management**: Replace direct
`AgentRepository` access with `AgentService` for create/delete/find
operations in workflow steps, improving encapsulation and consistency
- **Simplify Apollo client usage**: Remove explicit Apollo client
override in `useGetToolIndex`, add `AgentChatProvider` to
`AppRouterProviders`
- **Fix load-skill tool**: Change parameter type from `string` to `json`
for proper schema parsing
- **Update agent-chat-streaming**: Use `AgentService` for agent
resolution and tool registration instead of direct repository queries

## Test plan

- [ ] Verify AI agent chat works end-to-end (send message, receive
response)
- [ ] Verify tool steps display correctly with icons and proper messages
during loading and after completion
- [ ] Verify workflow AI agent step creation and deletion works
correctly
- [ ] Verify workflow version cloning preserves agent configuration
- [ ] Verify token renewal works when tokens expire during agent chat


Made with [Cursor](https://cursor.com)

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
This commit is contained in:
Félix Malfait
2026-02-13 10:27:38 +01:00
committed by GitHub
parent 5c3c2e08a6
commit 21c51ec251
39 changed files with 815 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx
+20 -27
View File
@@ -13,6 +13,8 @@ import {
getToolDisplayMessage,
resolveToolInput,
} from '@/ai/utils/getToolDisplayMessage';
import { ToolOutputMessageSchema } from '@/ai/schemas/toolOutputMessageSchema';
import { ToolOutputResultSchema } from '@/ai/schemas/toolOutputResultSchema';
import { useLingui } from '@lingui/react/macro';
import { type ToolUIPart } from 'ai';
import { isDefined } from 'twenty-shared/utils';
@@ -25,12 +27,6 @@ const StyledContainer = styled.div`
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledLoadingContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledContentContainer = styled.div`
background: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.light};
@@ -142,6 +138,7 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
const hasError = isDefined(errorText);
const isExpandable = isDefined(output) || hasError;
const ToolIcon = getToolIcon(toolName);
if (toolName === 'code_interpreter') {
const codeInput = toolInput as { code?: string } | undefined;
@@ -173,13 +170,14 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
<StyledContainer>
<StyledToggleButton isExpandable={false}>
<StyledLeftContent>
<StyledLoadingContainer>
<StyledIconTextContainer>
<ToolIcon size={theme.icon.size.sm} />
<ShimmeringText>
<StyledDisplayMessage>
{getToolDisplayMessage(input, rawToolName, false)}
</StyledDisplayMessage>
</ShimmeringText>
</StyledLoadingContainer>
</StyledIconTextContainer>
</StyledLeftContent>
<StyledRightContent>
<StyledToolName>{toolName}</StyledToolName>
@@ -190,33 +188,28 @@ export const ToolStepRenderer = ({ toolPart }: { toolPart: ToolUIPart }) => {
}
// For execute_tool, the actual result is nested inside output.result
const outputResult = ToolOutputResultSchema.safeParse(output);
const unwrappedOutput =
rawToolName === 'execute_tool' &&
isDefined(output) &&
typeof output === 'object' &&
'result' in output
? (output as { result: unknown }).result
rawToolName === 'execute_tool' && outputResult.success
? outputResult.data.result
: output;
const unwrappedResult = ToolOutputResultSchema.safeParse(unwrappedOutput);
const unwrappedMessage = ToolOutputMessageSchema.safeParse(unwrappedOutput);
const displayMessage = hasError
? t`Tool execution failed`
: rawToolName === 'learn_tools' || rawToolName === 'execute_tool'
: rawToolName === 'learn_tools' ||
rawToolName === 'execute_tool' ||
rawToolName === 'load_skills'
? getToolDisplayMessage(input, rawToolName, true)
: unwrappedOutput &&
typeof unwrappedOutput === 'object' &&
'message' in unwrappedOutput &&
typeof unwrappedOutput.message === 'string'
? unwrappedOutput.message
: unwrappedMessage.success
? unwrappedMessage.data.message
: getToolDisplayMessage(input, rawToolName, true);
const result =
unwrappedOutput &&
typeof unwrappedOutput === 'object' &&
'result' in unwrappedOutput
? (unwrappedOutput as { result: string }).result
: unwrappedOutput;
const ToolIcon = getToolIcon(toolName);
const result = unwrappedResult.success
? unwrappedResult.data.result
: unwrappedOutput;
return (
<StyledContainer>
packages/twenty-front/src/modules/ai/graphql/queries/getToolIndex.ts
-1
View File
@@ -7,7 +7,6 @@ export const GET_TOOL_INDEX = gql`
description
category
objectName
inputSchema
}
}
`;
packages/twenty-front/src/modules/ai/graphql/queries/getToolInputSchemas.ts
+7
View File
@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';
export const GET_TOOL_INPUT_SCHEMA = gql`
query GetToolInputSchema($toolName: String!) {
getToolInputSchema(toolName: $toolName)
}
`;
packages/twenty-front/src/modules/ai/hooks/useAgentChat.ts
+3 -3
View File
@@ -6,6 +6,8 @@ import { agentChatUploadedFilesState } from '@/ai/states/agentChatUploadedFilesS
import { agentChatUsageState } from '@/ai/states/agentChatUsageState';
import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
import { agentChatInputState } from '@/ai/states/agentChatInputState';
import { REST_API_BASE_URL } from '@/apollo/constant/rest-api-base-url';
import { getTokenPair } from '@/apollo/utils/getTokenPair';
import { renewToken } from '@/auth/services/AuthService';
import { tokenPairState } from '@/auth/states/tokenPairState';
@@ -15,8 +17,6 @@ import { type ExtendedUIMessage } from 'twenty-shared/ai';
import { isDefined } from 'twenty-shared/utils';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { cookieStorage } from '~/utils/cookie-storage';
import { REST_API_BASE_URL } from '@/apollo/constant/rest-api-base-url';
import { agentChatInputState } from '@/ai/states/agentChatInputState';
export const useAgentChat = (uiMessages: ExtendedUIMessage[]) => {
const setTokenPair = useSetRecoilState(tokenPairState);
@@ -47,7 +47,7 @@ export const useAgentChat = (uiMessages: ExtendedUIMessage[]) => {
try {
const renewedTokens = await renewToken(
`${REACT_APP_SERVER_BASE_URL}/graphql`,
`${REACT_APP_SERVER_BASE_URL}/metadata`,
tokenPair,
);
packages/twenty-front/src/modules/ai/hooks/useGetToolIndex.ts
+1 -6
View File
@@ -1,4 +1,3 @@
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { GET_TOOL_INDEX } from '@/ai/graphql/queries/getToolIndex';
import { useQuery } from '@apollo/client';
@@ -14,11 +13,7 @@ type GetToolIndexQuery = {
};
export const useGetToolIndex = () => {
const apolloMetadataClient = useApolloCoreClient();
const { data, loading, error } = useQuery<GetToolIndexQuery>(GET_TOOL_INDEX, {
client: apolloMetadataClient ?? undefined,
});
const { data, loading, error } = useQuery<GetToolIndexQuery>(GET_TOOL_INDEX);
return {
toolIndex: data?.getToolIndex ?? [],
packages/twenty-front/src/modules/ai/schemas/toolOutputMessageSchema.ts
+3
View File
@@ -0,0 +1,3 @@
import { z } from 'zod';
export const ToolOutputMessageSchema = z.object({ message: z.string() });
packages/twenty-front/src/modules/ai/schemas/toolOutputResultSchema.ts
+3
View File
@@ -0,0 +1,3 @@
import { z } from 'zod';
export const ToolOutputResultSchema = z.object({ result: z.unknown() });
packages/twenty-front/src/modules/ai/utils/getToolDisplayMessage.ts
+86 -54
View File
@@ -1,77 +1,79 @@
import { t } from '@lingui/core/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { z } from 'zod';
import { type ToolInput } from '@/ai/types/ToolInput';
import { isDefined } from 'twenty-shared/utils';
const DirectQuerySchema = z.object({ query: z.string() });
const NestedQuerySchema = z.object({
action: z.object({ query: z.string() }),
});
const CustomLoadingMessageSchema = z.object({ loadingMessage: z.string() });
const ExecuteToolSchema = z.object({
toolName: z.coerce.string(),
arguments: z.unknown(),
});
const LearnToolsSchema = z.object({ toolNames: z.array(z.string()) });
const LoadSkillsSchema = z.object({ skillNames: z.array(z.string()) });
const extractSearchQuery = (input: ToolInput): string => {
if (!input) {
return '';
const direct = DirectQuerySchema.safeParse(input);
if (direct.success) {
return direct.data.query;
}
if (
typeof input === 'object' &&
'query' in input &&
typeof input.query === 'string'
) {
return input.query;
}
const nested = NestedQuerySchema.safeParse(input);
if (
typeof input === 'object' &&
'action' in input &&
isDefined(input.action) &&
typeof input.action === 'object' &&
'query' in input.action &&
typeof input.action.query === 'string'
) {
return input.action.query;
if (nested.success) {
return nested.data.action.query;
}
return '';
};
const extractLoadingMessage = (input: ToolInput): string => {
if (
isDefined(input) &&
typeof input === 'object' &&
'loadingMessage' in input &&
typeof input.loadingMessage === 'string'
) {
return input.loadingMessage;
}
const extractCustomLoadingMessage = (input: ToolInput): string | null => {
const parsed = CustomLoadingMessageSchema.safeParse(input);
return 'Processing...';
return parsed.success ? parsed.data.loadingMessage : null;
};
export const resolveToolInput = (
input: ToolInput,
toolName: string,
): { resolvedInput: ToolInput; resolvedToolName: string } => {
if (
toolName === 'execute_tool' &&
isDefined(input) &&
typeof input === 'object' &&
'toolName' in input &&
'arguments' in input
) {
return {
resolvedInput: input.arguments as ToolInput,
resolvedToolName: String(input.toolName),
};
if (toolName !== 'execute_tool') {
return { resolvedInput: input, resolvedToolName: toolName };
}
return { resolvedInput: input, resolvedToolName: toolName };
const parsed = ExecuteToolSchema.safeParse(input);
if (!parsed.success) {
return { resolvedInput: input, resolvedToolName: toolName };
}
return {
resolvedInput: parsed.data.arguments as ToolInput,
resolvedToolName: parsed.data.toolName,
};
};
const extractLearnToolNames = (input: ToolInput): string => {
if (
isDefined(input) &&
typeof input === 'object' &&
'toolNames' in input &&
Array.isArray(input.toolNames)
) {
return input.toolNames.join(', ');
}
const parsed = LearnToolsSchema.safeParse(input);
return '';
return parsed.success ? parsed.data.toolNames.join(', ') : '';
};
const extractSkillNames = (input: ToolInput): string => {
const parsed = LoadSkillsSchema.safeParse(input);
return parsed.success ? parsed.data.skillNames.join(', ') : '';
};
const formatToolName = (toolName: string): string => {
return toolName.replace(/_/g, ' ');
};
export const getToolDisplayMessage = (
@@ -81,19 +83,49 @@ export const getToolDisplayMessage = (
): string => {
const { resolvedInput, resolvedToolName } = resolveToolInput(input, toolName);
const byStatus = (finished: string, inProgress: string): string =>
isFinished ? finished : inProgress;
if (resolvedToolName === 'web_search') {
const query = extractSearchQuery(resolvedInput);
const action = isFinished ? 'Searched' : 'Searching';
return query ? `${action} the web for '${query}'` : `${action} the web`;
if (isNonEmptyString(query)) {
return byStatus(
t`Searched the web for '${query}'`,
t`Searching the web for '${query}'`,
);
}
return byStatus(t`Searched the web`, t`Searching the web`);
}
if (resolvedToolName === 'learn_tools') {
const names = extractLearnToolNames(resolvedInput);
const action = isFinished ? 'Learned' : 'Learning';
return names ? `${action} ${names}` : `${action} tools...`;
if (isNonEmptyString(names)) {
return byStatus(t`Learned ${names}`, t`Learning ${names}`);
}
return byStatus(t`Learned tools`, t`Learning tools...`);
}
return extractLoadingMessage(resolvedInput);
if (resolvedToolName === 'load_skills') {
const names = extractSkillNames(resolvedInput);
if (isNonEmptyString(names)) {
return byStatus(t`Loaded ${names}`, t`Loading ${names}`);
}
return byStatus(t`Loaded skills`, t`Loading skills...`);
}
const customMessage = extractCustomLoadingMessage(resolvedInput);
if (isDefined(customMessage)) {
return customMessage;
}
const formattedName = formatToolName(resolvedToolName);
return byStatus(t`Ran ${formattedName}`, t`Running ${formattedName}`);
};
packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
+17 -14
View File
@@ -1,3 +1,4 @@
import { AgentChatProvider } from '@/ai/components/AgentChatProvider';
import { ApolloProvider } from '@/apollo/components/ApolloProvider';
import { GotoHotkeysEffectsProvider } from '@/app/effect-components/GotoHotkeysEffectsProvider';
import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
@@ -55,20 +56,22 @@ export const AppRouterProviders = () => {
<UserThemeProviderEffect />
<SnackBarProvider>
<ErrorMessageEffect />
<DialogComponentInstanceContext.Provider
value={{ instanceId: 'dialog-manager' }}
>
<DialogManager>
<StrictMode>
<PromiseRejectionEffect />
<GotoHotkeysEffectsProvider />
<PageTitle title={pageTitle} />
<PageFavicon />
<Outlet />
<GlobalFilePreviewModal />
</StrictMode>
</DialogManager>
</DialogComponentInstanceContext.Provider>
<AgentChatProvider>
<DialogComponentInstanceContext.Provider
value={{ instanceId: 'dialog-manager' }}
>
<DialogManager>
<StrictMode>
<PromiseRejectionEffect />
<GotoHotkeysEffectsProvider />
<PageTitle title={pageTitle} />
<PageFavicon />
<Outlet />
<GlobalFilePreviewModal />
</StrictMode>
</DialogManager>
</DialogComponentInstanceContext.Provider>
</AgentChatProvider>
</SnackBarProvider>
<MainContextStoreProvider />
<SupportChatEffect />
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+3 -6
View File
@@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { AgentChatProvider } from '@/ai/components/AgentChatProvider';
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
@@ -60,11 +59,9 @@ export const CommandMenuContainer = ({
<ActionMenuComponentInstanceContext.Provider
value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
>
<AgentChatProvider>
<StyledCommandMenuContainer isMobile={isMobile}>
{children}
</StyledCommandMenuContainer>
</AgentChatProvider>
<StyledCommandMenuContainer isMobile={isMobile}>
{children}
</StyledCommandMenuContainer>
</ActionMenuComponentInstanceContext.Provider>
</ContextStoreComponentInstanceContext.Provider>
</RecordComponentInstanceContextsWrapper>