From 42adcccc97cee15673c521ce9d4f504168b0fd71 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Mon, 4 Aug 2025 18:19:53 -0400 Subject: [PATCH 01/17] test tool flyout --- .../components/tools/base/test_tools.tsx | 144 ++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx new file mode 100644 index 0000000000000..8c0871fe33ecd --- /dev/null +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx @@ -0,0 +1,144 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { + EuiButton, + EuiFieldText, + EuiFlexGroup, + EuiFlexItem, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiForm, + EuiFormRow, + EuiSpacer, + EuiTitle, + useEuiTheme, +} from '@elastic/eui'; +import React, { useState } from 'react'; +import { EsqlToolDefinitionWithSchema } from "@kbn/onechat-common"; +import { i18n } from '@kbn/i18n'; +import { CodeEditor } from '@kbn/code-editor'; + +interface OnechatTestToolFlyoutProps { + isOpen: boolean; + isLoading?: boolean; + tool?: EsqlToolDefinitionWithSchema; + onClose: () => void; +} + +const inputs = [ + { + label: 'Tool ID', + name: 'toolId', + type: 'text', + }, + { + label: 'Configuration', + name: 'configuration', + type: 'json', + }, + { + label: 'Max Results', + name: 'maxResults', + type: 'number', + }, +] + +export const OnechatTestFlyout: React.FC = ({ + isOpen, + isLoading, + tool, + onClose, +}) => { + const { euiTheme } = useEuiTheme(); + + const [formData, setFormData] = useState({ + toolId: tool?.id || '', + configuration: JSON.stringify(tool?.configuration, null, 2), + maxResults: '3', + }); + + if (!isOpen) { + return null; + } + + const handleInputChange = (name: string, value: string) => { + setFormData(prev => ({ ...prev, [name]: value })); + }; + + const handleExecute = () => { + console.log('Execute test with data:', formData); + }; + + return ( + + + + + +

Test Tool

+ + + + + + + + +
Inputs
+ + + + {inputs.map((input) => ( + + handleInputChange(input.name, e.target.value)} + placeholder={`Enter ${input.label.toLowerCase()}`} + min={input.type === 'number' ? 1 : undefined} + /> + + ))} + + + + + Execute + + + + + + + +
Response
+ + + + + + + + ); +}; + From a5ed989dfc3f34292e73ac1f0b45b30fe1d69213 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Mon, 11 Aug 2025 17:17:17 -0400 Subject: [PATCH 02/17] use just list of parameters and add execute --- .../shared/onechat/common/http_api/tools.ts | 4 + .../components/tools/base/test_tools.tsx | 164 ++++++++----- .../tools/esql/esql_tool_flyout.tsx | 232 ++++++++++++++++++ .../hooks/tools/use_execute_tools.ts | 46 ++++ .../public/services/tools/tools_service.ts | 10 + 5 files changed, 398 insertions(+), 58 deletions(-) create mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx create mode 100644 x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts diff --git a/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts b/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts index 4f955f3afc5ac..47295fe14b3aa 100644 --- a/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts +++ b/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts @@ -50,3 +50,7 @@ export type BulkDeleteToolResult = BulkDeleteToolSuccessResult | BulkDeleteToolF export interface BulkDeleteToolResponse { results: BulkDeleteToolResult[]; } + +export interface ExecuteToolResponse { + result: any; +} diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx index 8c0871fe33ecd..b69890b82e451 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx @@ -8,6 +8,7 @@ import { EuiButton, EuiFieldText, + EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFlyout, @@ -17,12 +18,13 @@ import { EuiFormRow, EuiSpacer, EuiTitle, - useEuiTheme, } from '@elastic/eui'; import React, { useState } from 'react'; -import { EsqlToolDefinitionWithSchema } from "@kbn/onechat-common"; +import { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; import { i18n } from '@kbn/i18n'; import { CodeEditor } from '@kbn/code-editor'; +import { useExecuteTool } from '../../../hooks/tools/use_execute_tools'; +import type { ExecuteToolResponse } from '../../../../../common/http_api/tools'; interface OnechatTestToolFlyoutProps { isOpen: boolean; @@ -31,23 +33,25 @@ interface OnechatTestToolFlyoutProps { onClose: () => void; } -const inputs = [ - { - label: 'Tool ID', - name: 'toolId', - type: 'text', - }, - { - label: 'Configuration', - name: 'configuration', - type: 'json', - }, - { - label: 'Max Results', - name: 'maxResults', - type: 'number', - }, -] +const getParameters = (tool: EsqlToolDefinitionWithSchema | undefined) => { + if (!tool) return []; + + const fields: Array<{ name: string; label: string; value: string; type: string }> = []; + + if (tool.configuration && tool.configuration.params) { + const params = tool.configuration.params as Record; + Object.entries(params).forEach(([paramName, paramConfig]) => { + fields.push({ + name: `${paramName}`, + label: `${paramName}`, + value: '', + type: paramConfig.type || 'text', + }); + }); + } + + return fields; +}; export const OnechatTestFlyout: React.FC = ({ isOpen, @@ -55,12 +59,16 @@ export const OnechatTestFlyout: React.FC = ({ tool, onClose, }) => { - const { euiTheme } = useEuiTheme(); - - const [formData, setFormData] = useState({ - toolId: tool?.id || '', - configuration: JSON.stringify(tool?.configuration, null, 2), - maxResults: '3', + const [formData, setFormData] = useState>({}); + const [response, setResponse] = useState('{}'); + + const { executeTool, isLoading: isExecuting } = useExecuteTool({ + onSuccess: (data: ExecuteToolResponse) => { + setResponse(JSON.stringify(data, null, 2)); + }, + onError: (error: Error) => { + setResponse(JSON.stringify({ error: 'Failed to execute tool' }, null, 2)); + }, }); if (!isOpen) { @@ -68,11 +76,29 @@ export const OnechatTestFlyout: React.FC = ({ } const handleInputChange = (name: string, value: string) => { - setFormData(prev => ({ ...prev, [name]: value })); + setFormData((prev) => ({ ...prev, [name]: value })); }; - const handleExecute = () => { - console.log('Execute test with data:', formData); + const handleExecute = async () => { + if (!tool?.id) return; + + const toolParams: Record = {}; + getParameters(tool).forEach((field) => { + if (formData[field.name]) { + let value = formData[field.name]; + if (field.type === 'integer' || field.type === 'long') { + value = parseInt(value, 10); + } else if (field.type === 'double' || field.type === 'float') { + value = parseFloat(value); + } + toolParams[field.name] = value; + } + }); + + await executeTool({ + toolId: tool.id, + toolParams, + }); }; return ( @@ -90,55 +116,77 @@ export const OnechatTestFlyout: React.FC = ({ -
Inputs
+
+ {i18n.translate('xpack.onechat.tools.testTool.inputsTitle', { + defaultMessage: 'Inputs', + })} +
- {inputs.map((input) => ( - - handleInputChange(input.name, e.target.value)} - placeholder={`Enter ${input.label.toLowerCase()}`} - min={input.type === 'number' ? 1 : undefined} - /> + {getParameters(tool)?.map((field) => ( + + {field.type === 'integer' || + field.type === 'long' || + field.type === 'double' || + field.type === 'float' ? ( + handleInputChange(field.name, e.target.value)} + placeholder={`Enter ${field.label.toLowerCase()}`} + fullWidth + /> + ) : ( + handleInputChange(field.name, e.target.value)} + placeholder={`Enter ${field.label.toLowerCase()}`} + fullWidth + /> + )} ))} - - Execute + + {i18n.translate('xpack.onechat.tools.testTool.executeButton', { + defaultMessage: 'Execute', + })} - + -
Response
+
+ {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { + defaultMessage: 'Response', + })} +
- + ); }; - diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx new file mode 100644 index 0000000000000..15a5e520620d2 --- /dev/null +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx @@ -0,0 +1,232 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlyoutHeader, + EuiLoadingSpinner, + EuiThemeComputed, + EuiTitle, + EuiToolTip, + useEuiTheme, + useGeneratedHtmlId, +} from '@elastic/eui'; +import { css } from '@emotion/react'; +import { i18n } from '@kbn/i18n'; +import { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; +import React, { useCallback, useEffect, useState } from 'react'; +import { FormProvider, useForm } from 'react-hook-form'; +import { transformEsqlToolToFormData } from '../../../utils/transform_esql_form_data'; +import { OnechatEsqlToolForm } from './form/esql_tool_form'; +import { OnechatEsqlToolFormData } from './form/types/esql_tool_form_types'; +import { useEsqlToolFormValidationResolver } from './form/validation/esql_tool_form_validation'; +import { OnechatTestFlyout } from '../base/test_tools'; + +const flyoutBodyClass = (euiTheme: EuiThemeComputed) => + css` + position: relative; + + .euiFlyoutBody__overflow { + transform: none; /* Remove the transform to avoid creating a new stacking context */ + mask-image: none; /* Remove the mask-image to avoid cutting off ES|QL suggestions */ + } + + /* Manually re-add the same fade effect to the flyout body */ + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: ${euiTheme.size.s}; + background: linear-gradient(to bottom, ${euiTheme.colors.plainLight}, transparent); + pointer-events: none; + } + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: ${euiTheme.size.s}; + background: linear-gradient(to top, ${euiTheme.colors.plainLight}, transparent); + pointer-events: none; + } + `; + +export enum OnechatEsqlToolFlyoutMode { + Create = 'create', + Edit = 'edit', +} + +export interface OnechatEsqlToolFlyoutProps { + mode: OnechatEsqlToolFlyoutMode; + isOpen: boolean; + isSubmitting: boolean; + isLoading?: boolean; + tool?: EsqlToolDefinitionWithSchema; + onClose: () => void; + submit: (data: OnechatEsqlToolFormData) => Promise; +} + +const getDefaultValues = (): OnechatEsqlToolFormData => ({ + name: '', + description: '', + esql: '', + tags: [], + params: [], +}); + +export const OnechatEsqlToolFlyout: React.FC = ({ + mode, + isOpen, + isLoading, + isSubmitting, + tool, + onClose, + submit: saveTool, +}) => { + const resolver = useEsqlToolFormValidationResolver(); + const form = useForm({ + defaultValues: getDefaultValues(), + resolver, + mode: 'onBlur', + }); + const { reset, formState, getValues } = form; + const { errors, isSubmitSuccessful } = formState; + const { euiTheme } = useEuiTheme(); + const [showTestFlyout, setShowTestFlyout] = useState(false); + + useEffect(() => { + reset(tool ? transformEsqlToolToFormData(tool) : getDefaultValues()); + }, [reset, tool]); + + useEffect(() => { + if (isSubmitSuccessful) { + reset(getDefaultValues()); + } + }, [isSubmitSuccessful, reset]); + + const esqlToolFlyoutTitleId = useGeneratedHtmlId({ + prefix: 'esqlToolFlyoutTitle', + }); + const esqlToolFormId = useGeneratedHtmlId({ + prefix: 'esqlToolForm', + }); + + const handleClear = useCallback(() => { + reset(getDefaultValues()); + }, [reset]); + + const handleCloseFlyout = useCallback(() => { + // Persist form data to memory + reset(getValues()); + + onClose(); + }, [reset, onClose, getValues]); + + if (!isOpen) { + return null; + } + + const saveButton = ( + 0 || isSubmitting} + isLoading={isSubmitting} + > + {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveButtonLabel', { + defaultMessage: 'Save', + })} + + ); + + return ( + + setShowTestFlyout(false)} + /> + + + + + +

+ {mode === OnechatEsqlToolFlyoutMode.Create + ? i18n.translate('xpack.onechat.tools.newEsqlTool.title', { + defaultMessage: 'New ES|QL tool', + }) + : i18n.translate('xpack.onechat.tools.editEsqlTool.title', { + defaultMessage: 'Edit ES|QL tool', + })} +

+ + + + setShowTestFlyout(true)}> + {i18n.translate('xpack.onechat.tools.esqlToolFlyout.testButtonLabel', { + defaultMessage: 'Test', + })} + + + + + + {isLoading ? ( + + + + ) : ( + + )} + + + + + + {i18n.translate('xpack.onechat.tools.newEsqlTool.clearButtonLabel', { + defaultMessage: 'Clear', + })} + + + + {Object.keys(errors).length > 0 ? ( + + {saveButton} + + ) : ( + saveButton + )} + + + + + + ); +}; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts b/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts new file mode 100644 index 0000000000000..888304846f887 --- /dev/null +++ b/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts @@ -0,0 +1,46 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { useMutation } from '@tanstack/react-query'; +import { ExecuteToolResponse } from '../../../../common/http_api/tools'; +import { useOnechatServices } from '../use_onechat_service'; + +export interface ExecuteToolParams { + toolId: string; + toolParams: Record; +} + +export type ExecuteToolSuccessCallback = (data: ExecuteToolResponse) => void; +export type ExecuteToolErrorCallback = (error: Error) => void; + +export const useExecuteTool = ({ + onSuccess, + onError, +}: { + onSuccess?: ExecuteToolSuccessCallback; + onError?: ExecuteToolErrorCallback; +} = {}) => { + const { toolsService } = useOnechatServices(); + + const mutationFn = ({ toolId, toolParams }: ExecuteToolParams): Promise => + toolsService.execute(toolId, toolParams); + + const { mutateAsync, isLoading, error } = useMutation< + ExecuteToolResponse, + Error, + ExecuteToolParams + >(mutationFn, { + onSuccess, + onError, + }); + + return { + executeTool: mutateAsync, + isLoading, + error, + }; +}; diff --git a/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts b/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts index dceca66f30bbc..479390be76619 100644 --- a/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts +++ b/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts @@ -15,6 +15,7 @@ import type { CreateToolResponse, UpdateToolResponse, BulkDeleteToolResponse, + ExecuteToolResponse, } from '../../../common/http_api/tools'; export class ToolsService { @@ -54,4 +55,13 @@ export class ToolsService { body: JSON.stringify(update), }); } + + async execute(toolId: string, toolParams: Record) { + return await this.http.post('/api/chat/tools/_execute', { + body: JSON.stringify({ + tool_id: toolId, + tool_params: toolParams, + }), + }); + } } From 5991a0a789c02853ccdee23c741419988a665b42 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Tue, 12 Aug 2025 12:59:16 -0400 Subject: [PATCH 03/17] use form data --- .../components/tools/base/test_tools.tsx | 20 ++++++++++++------- .../tools/esql/esql_tool_flyout.tsx | 18 +++++++++++++++-- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx index b69890b82e451..783a6d4a83a32 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx @@ -20,7 +20,7 @@ import { EuiTitle, } from '@elastic/eui'; import React, { useState } from 'react'; -import { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; +import { EsqlToolDefinition } from '@kbn/onechat-common'; import { i18n } from '@kbn/i18n'; import { CodeEditor } from '@kbn/code-editor'; import { useExecuteTool } from '../../../hooks/tools/use_execute_tools'; @@ -29,11 +29,11 @@ import type { ExecuteToolResponse } from '../../../../../common/http_api/tools'; interface OnechatTestToolFlyoutProps { isOpen: boolean; isLoading?: boolean; - tool?: EsqlToolDefinitionWithSchema; + tool?: EsqlToolDefinition; onClose: () => void; } -const getParameters = (tool: EsqlToolDefinitionWithSchema | undefined) => { +const getParameters = (tool: EsqlToolDefinition | undefined) => { if (!tool) return []; const fields: Array<{ name: string; label: string; value: string; type: string }> = []; @@ -83,6 +83,7 @@ export const OnechatTestFlyout: React.FC = ({ if (!tool?.id) return; const toolParams: Record = {}; + getParameters(tool).forEach((field) => { if (formData[field.name]) { let value = formData[field.name]; @@ -107,7 +108,11 @@ export const OnechatTestFlyout: React.FC = ({ -

Test Tool

+

+ {i18n.translate('xpack.onechat.tools.testFlyout.title', { + defaultMessage: 'Test Tool', + })} +

@@ -147,16 +152,17 @@ export const OnechatTestFlyout: React.FC = ({ ))} - - + + {i18n.translate('xpack.onechat.tools.testTool.executeButton', { - defaultMessage: 'Execute', + defaultMessage: 'Submit', })} diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx index 15a5e520620d2..72b31da723b97 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx @@ -22,7 +22,7 @@ import { } from '@elastic/eui'; import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; -import { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; +import { EsqlToolDefinition, EsqlToolDefinitionWithSchema, EsqlToolParam, ToolType } from '@kbn/onechat-common'; import React, { useCallback, useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { transformEsqlToolToFormData } from '../../../utils/transform_esql_form_data'; @@ -159,7 +159,21 @@ export const OnechatEsqlToolFlyout: React.FC = ({ [ + param.name, + {type: param.type, description: param.description} + ]) + ) + } + }} onClose={() => setShowTestFlyout(false)} /> Date: Wed, 13 Aug 2025 13:20:34 -0400 Subject: [PATCH 04/17] use 'save and test' button --- .../components/tools/base/test_tools.tsx | 10 +-- .../tools/esql/esql_tool_flyout.tsx | 85 ++++++++++++------- 2 files changed, 59 insertions(+), 36 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx index 783a6d4a83a32..8854e6746139d 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx @@ -20,7 +20,7 @@ import { EuiTitle, } from '@elastic/eui'; import React, { useState } from 'react'; -import { EsqlToolDefinition } from '@kbn/onechat-common'; +import { ToolDefinition } from '@kbn/onechat-common'; import { i18n } from '@kbn/i18n'; import { CodeEditor } from '@kbn/code-editor'; import { useExecuteTool } from '../../../hooks/tools/use_execute_tools'; @@ -29,15 +29,14 @@ import type { ExecuteToolResponse } from '../../../../../common/http_api/tools'; interface OnechatTestToolFlyoutProps { isOpen: boolean; isLoading?: boolean; - tool?: EsqlToolDefinition; + tool?: ToolDefinition; onClose: () => void; } -const getParameters = (tool: EsqlToolDefinition | undefined) => { +const getParameters = (tool: ToolDefinition | undefined) => { if (!tool) return []; const fields: Array<{ name: string; label: string; value: string; type: string }> = []; - if (tool.configuration && tool.configuration.params) { const params = tool.configuration.params as Record; Object.entries(params).forEach(([paramName, paramConfig]) => { @@ -67,7 +66,7 @@ export const OnechatTestFlyout: React.FC = ({ setResponse(JSON.stringify(data, null, 2)); }, onError: (error: Error) => { - setResponse(JSON.stringify({ error: 'Failed to execute tool' }, null, 2)); + setResponse(JSON.stringify({ error: error.message }, null, 2)); }, }); @@ -83,7 +82,6 @@ export const OnechatTestFlyout: React.FC = ({ if (!tool?.id) return; const toolParams: Record = {}; - getParameters(tool).forEach((field) => { if (formData[field.name]) { let value = formData[field.name]; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx index 72b31da723b97..15865e4b3c250 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx @@ -22,7 +22,7 @@ import { } from '@elastic/eui'; import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; -import { EsqlToolDefinition, EsqlToolDefinitionWithSchema, EsqlToolParam, ToolType } from '@kbn/onechat-common'; +import { EsqlToolDefinitionWithSchema, ToolType } from '@kbn/onechat-common'; import React, { useCallback, useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { transformEsqlToolToFormData } from '../../../utils/transform_esql_form_data'; @@ -106,6 +106,7 @@ export const OnechatEsqlToolFlyout: React.FC = ({ const { errors, isSubmitSuccessful } = formState; const { euiTheme } = useEuiTheme(); const [showTestFlyout, setShowTestFlyout] = useState(false); + const [testToolData, setTestToolData] = useState(getDefaultValues()); useEffect(() => { reset(tool ? transformEsqlToolToFormData(tool) : getDefaultValues()); @@ -135,10 +136,6 @@ export const OnechatEsqlToolFlyout: React.FC = ({ onClose(); }, [reset, onClose, getValues]); - if (!isOpen) { - return null; - } - const saveButton = ( = ({ ); - return ( - - { + await saveTool(getValues()); + setTestToolData(form.getValues()); + setShowTestFlyout(true); + onClose(); + }} + disabled={Object.keys(errors).length > 0 || isSubmitting} + isLoading={isSubmitting} + > + {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveButtonLabel', { + defaultMessage: 'Save and Test', + })} + + ); + + if (showTestFlyout) { + const testTool = testToolData + ? { + id: testToolData.name, type: ToolType.esql, - description: form.getValues().description, - tags: form.getValues().tags, + description: testToolData.description, + tags: testToolData.tags, configuration: { - query: form.getValues().esql, + query: testToolData.esql, params: Object.fromEntries( - form.getValues().params.map((param) => [ + testToolData.params.map((param) => [ param.name, - {type: param.type, description: param.description} + { type: param.type, description: param.description }, ]) - ) - } - }} - onClose={() => setShowTestFlyout(false)} - /> + ), + }, + } + : tool; + return ( + + setShowTestFlyout(false)} + /> + + ); + } + + if (!isOpen) { + return null; + } + + return ( + = ({ - - setShowTestFlyout(true)}> - {i18n.translate('xpack.onechat.tools.esqlToolFlyout.testButtonLabel', { - defaultMessage: 'Test', - })} - - @@ -235,7 +257,10 @@ export const OnechatEsqlToolFlyout: React.FC = ({ {saveButton} ) : ( - saveButton + + {saveButton} + {saveAndTestButton} + )} From d1c2463d2021a3aee409aec8ab389b4401e34f8b Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Wed, 13 Aug 2025 13:29:37 -0400 Subject: [PATCH 05/17] revert some fixes --- .../components/tools/base/test_tools.tsx | 4 --- .../tools/esql/esql_tool_flyout.tsx | 26 ++++++++----------- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx index 8854e6746139d..adb54b4fa1b9f 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx @@ -70,10 +70,6 @@ export const OnechatTestFlyout: React.FC = ({ }, }); - if (!isOpen) { - return null; - } - const handleInputChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })); }; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx index 15865e4b3c250..81a80b13e0ca0 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx @@ -212,21 +212,17 @@ export const OnechatEsqlToolFlyout: React.FC = ({ maxWidth > - - - -

- {mode === OnechatEsqlToolFlyoutMode.Create - ? i18n.translate('xpack.onechat.tools.newEsqlTool.title', { - defaultMessage: 'New ES|QL tool', - }) - : i18n.translate('xpack.onechat.tools.editEsqlTool.title', { - defaultMessage: 'Edit ES|QL tool', - })} -

- - - + +

+ {mode === OnechatEsqlToolFlyoutMode.Create + ? i18n.translate('xpack.onechat.tools.newEsqlTool.title', { + defaultMessage: 'New ES|QL tool', + }) + : i18n.translate('xpack.onechat.tools.editEsqlTool.title', { + defaultMessage: 'Edit ES|QL tool', + })} +

+ {isLoading ? ( From 3348b528a1069095937287ef6fa68726edb180c4 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Wed, 13 Aug 2025 13:31:46 -0400 Subject: [PATCH 06/17] fix --- .../application/components/tools/esql/esql_tool_flyout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx index 81a80b13e0ca0..d863d33c529a2 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx @@ -212,7 +212,7 @@ export const OnechatEsqlToolFlyout: React.FC = ({ maxWidth > - +

{mode === OnechatEsqlToolFlyoutMode.Create ? i18n.translate('xpack.onechat.tools.newEsqlTool.title', { From 64b623e458847cae22fd173dd2e2abbc02ea4c24 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Thu, 14 Aug 2025 11:27:12 -0400 Subject: [PATCH 07/17] put save and test on latest pages --- .../components/tools/esql/esql_tool.tsx | 61 +++- .../tools/esql/esql_tool_flyout.tsx | 267 ------------------ .../tools/{base => test}/test_tools.tsx | 0 3 files changed, 58 insertions(+), 270 deletions(-) delete mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx rename x-pack/platform/plugins/shared/onechat/public/application/components/tools/{base => test}/test_tools.tsx (100%) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx index 49072577f7b83..071e781bca7ab 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx @@ -15,10 +15,11 @@ import { useGeneratedHtmlId, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; +import { EsqlToolDefinitionWithSchema, ToolType } from '@kbn/onechat-common'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { FormProvider } from 'react-hook-form'; +import { i18n } from '@kbn/i18n'; import { CreateToolPayload, CreateToolResponse, @@ -36,6 +37,7 @@ import { import { OnechatEsqlToolForm, OnechatEsqlToolFormMode } from './form/esql_tool_form'; import { OnechatEsqlToolFormData } from './form/types/esql_tool_form_types'; import { useEsqlToolForm } from '../../../hooks/tools/use_esql_tool_form'; +import { OnechatTestFlyout } from '../test/test_tools'; interface EsqlToolBaseProps { tool?: EsqlToolDefinitionWithSchema; @@ -67,6 +69,8 @@ export const EsqlTool: React.FC = ({ const form = useEsqlToolForm(); const { reset, formState } = form; const { errors } = formState; + const [showTestFlyout, setShowTestFlyout] = useState(false); + const [testToolData, setTestToolData] = useState(form.getValues()); const handleClear = useCallback(() => { reset(); @@ -107,6 +111,28 @@ export const EsqlTool: React.FC = ({ ); + const saveAndTestButton = ( + { + const formData = form.getValues(); + if (mode === OnechatEsqlToolFormMode.Edit) { + await saveTool(transformEsqlFormDataForUpdate(formData)); + } else { + await saveTool(transformEsqlFormDataForCreate(formData)); + } + setTestToolData(formData); + setShowTestFlyout(true); + }} + disabled={Object.keys(errors).length > 0 || isSubmitting} + isLoading={isSubmitting} + > + {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveButtonLabel', { + defaultMessage: 'Save and Test', + })} + + ); + return ( @@ -127,7 +153,35 @@ export const EsqlTool: React.FC = ({ ) : ( - + <> + + {showTestFlyout && ( + [ + param.name, + { type: param.type, description: param.description }, + ]) + ), + }, + } + : tool + } + onClose={() => setShowTestFlyout(false)} + /> + )} + )} = ({ saveButton )} + {saveAndTestButton} diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx deleted file mode 100644 index d863d33c529a2..0000000000000 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool_flyout.tsx +++ /dev/null @@ -1,267 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutFooter, - EuiFlyoutHeader, - EuiLoadingSpinner, - EuiThemeComputed, - EuiTitle, - EuiToolTip, - useEuiTheme, - useGeneratedHtmlId, -} from '@elastic/eui'; -import { css } from '@emotion/react'; -import { i18n } from '@kbn/i18n'; -import { EsqlToolDefinitionWithSchema, ToolType } from '@kbn/onechat-common'; -import React, { useCallback, useEffect, useState } from 'react'; -import { FormProvider, useForm } from 'react-hook-form'; -import { transformEsqlToolToFormData } from '../../../utils/transform_esql_form_data'; -import { OnechatEsqlToolForm } from './form/esql_tool_form'; -import { OnechatEsqlToolFormData } from './form/types/esql_tool_form_types'; -import { useEsqlToolFormValidationResolver } from './form/validation/esql_tool_form_validation'; -import { OnechatTestFlyout } from '../base/test_tools'; - -const flyoutBodyClass = (euiTheme: EuiThemeComputed) => - css` - position: relative; - - .euiFlyoutBody__overflow { - transform: none; /* Remove the transform to avoid creating a new stacking context */ - mask-image: none; /* Remove the mask-image to avoid cutting off ES|QL suggestions */ - } - - /* Manually re-add the same fade effect to the flyout body */ - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: ${euiTheme.size.s}; - background: linear-gradient(to bottom, ${euiTheme.colors.plainLight}, transparent); - pointer-events: none; - } - - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: ${euiTheme.size.s}; - background: linear-gradient(to top, ${euiTheme.colors.plainLight}, transparent); - pointer-events: none; - } - `; - -export enum OnechatEsqlToolFlyoutMode { - Create = 'create', - Edit = 'edit', -} - -export interface OnechatEsqlToolFlyoutProps { - mode: OnechatEsqlToolFlyoutMode; - isOpen: boolean; - isSubmitting: boolean; - isLoading?: boolean; - tool?: EsqlToolDefinitionWithSchema; - onClose: () => void; - submit: (data: OnechatEsqlToolFormData) => Promise; -} - -const getDefaultValues = (): OnechatEsqlToolFormData => ({ - name: '', - description: '', - esql: '', - tags: [], - params: [], -}); - -export const OnechatEsqlToolFlyout: React.FC = ({ - mode, - isOpen, - isLoading, - isSubmitting, - tool, - onClose, - submit: saveTool, -}) => { - const resolver = useEsqlToolFormValidationResolver(); - const form = useForm({ - defaultValues: getDefaultValues(), - resolver, - mode: 'onBlur', - }); - const { reset, formState, getValues } = form; - const { errors, isSubmitSuccessful } = formState; - const { euiTheme } = useEuiTheme(); - const [showTestFlyout, setShowTestFlyout] = useState(false); - const [testToolData, setTestToolData] = useState(getDefaultValues()); - - useEffect(() => { - reset(tool ? transformEsqlToolToFormData(tool) : getDefaultValues()); - }, [reset, tool]); - - useEffect(() => { - if (isSubmitSuccessful) { - reset(getDefaultValues()); - } - }, [isSubmitSuccessful, reset]); - - const esqlToolFlyoutTitleId = useGeneratedHtmlId({ - prefix: 'esqlToolFlyoutTitle', - }); - const esqlToolFormId = useGeneratedHtmlId({ - prefix: 'esqlToolForm', - }); - - const handleClear = useCallback(() => { - reset(getDefaultValues()); - }, [reset]); - - const handleCloseFlyout = useCallback(() => { - // Persist form data to memory - reset(getValues()); - - onClose(); - }, [reset, onClose, getValues]); - - const saveButton = ( - 0 || isSubmitting} - isLoading={isSubmitting} - > - {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveButtonLabel', { - defaultMessage: 'Save', - })} - - ); - - const saveAndTestButton = ( - { - await saveTool(getValues()); - setTestToolData(form.getValues()); - setShowTestFlyout(true); - onClose(); - }} - disabled={Object.keys(errors).length > 0 || isSubmitting} - isLoading={isSubmitting} - > - {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveButtonLabel', { - defaultMessage: 'Save and Test', - })} - - ); - - if (showTestFlyout) { - const testTool = testToolData - ? { - id: testToolData.name, - type: ToolType.esql, - description: testToolData.description, - tags: testToolData.tags, - configuration: { - query: testToolData.esql, - params: Object.fromEntries( - testToolData.params.map((param) => [ - param.name, - { type: param.type, description: param.description }, - ]) - ), - }, - } - : tool; - return ( - - setShowTestFlyout(false)} - /> - - ); - } - - if (!isOpen) { - return null; - } - - return ( - - - - -

- {mode === OnechatEsqlToolFlyoutMode.Create - ? i18n.translate('xpack.onechat.tools.newEsqlTool.title', { - defaultMessage: 'New ES|QL tool', - }) - : i18n.translate('xpack.onechat.tools.editEsqlTool.title', { - defaultMessage: 'Edit ES|QL tool', - })} -

- - - - {isLoading ? ( - - - - ) : ( - - )} - - - - - - {i18n.translate('xpack.onechat.tools.newEsqlTool.clearButtonLabel', { - defaultMessage: 'Clear', - })} - - - - {Object.keys(errors).length > 0 ? ( - - {saveButton} - - ) : ( - - {saveButton} - {saveAndTestButton} - - )} - - - - - - ); -}; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/test/test_tools.tsx similarity index 100% rename from x-pack/platform/plugins/shared/onechat/public/application/components/tools/base/test_tools.tsx rename to x-pack/platform/plugins/shared/onechat/public/application/components/tools/test/test_tools.tsx From 35d372ed7cb1c62fa0cd1b34bf22b4bb54ed593c Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Thu, 14 Aug 2025 14:07:15 -0400 Subject: [PATCH 08/17] rename folder --- .../public/application/components/tools/esql/esql_tool.tsx | 2 +- .../components/tools/{test => execute}/test_tools.tsx | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename x-pack/platform/plugins/shared/onechat/public/application/components/tools/{test => execute}/test_tools.tsx (100%) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx index 071e781bca7ab..58079eee9963c 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx @@ -37,7 +37,7 @@ import { import { OnechatEsqlToolForm, OnechatEsqlToolFormMode } from './form/esql_tool_form'; import { OnechatEsqlToolFormData } from './form/types/esql_tool_form_types'; import { useEsqlToolForm } from '../../../hooks/tools/use_esql_tool_form'; -import { OnechatTestFlyout } from '../test/test_tools'; +import { OnechatTestFlyout } from '../execute/test_tools'; interface EsqlToolBaseProps { tool?: EsqlToolDefinitionWithSchema; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/test/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx similarity index 100% rename from x-pack/platform/plugins/shared/onechat/public/application/components/tools/test/test_tools.tsx rename to x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx From b5d6c3b0ed12966e0c65267f4a422cc987f431d3 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Mon, 25 Aug 2025 16:05:46 -0400 Subject: [PATCH 09/17] address feedback --- .../shared/onechat/common/http_api/tools.ts | 3 +- .../components/tools/esql/esql_tool.tsx | 28 ++- .../components/tools/execute/test_tools.tsx | 181 ++++++++++-------- .../hooks/tools/use_execute_tools.ts | 2 +- .../public/services/tools/tools_service.ts | 2 +- 5 files changed, 130 insertions(+), 86 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts b/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts index 47295fe14b3aa..0361995b4798e 100644 --- a/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts +++ b/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts @@ -10,6 +10,7 @@ import type { ToolDefinitionWithSchema, SerializedOnechatError, } from '@kbn/onechat-common'; +import { ToolResult } from '@kbn/onechat-common/tools/tool_result'; export interface ListToolsResponse { results: ToolDefinitionWithSchema[]; @@ -52,5 +53,5 @@ export interface BulkDeleteToolResponse { } export interface ExecuteToolResponse { - result: any; + result: ToolResult[]; } diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx index 58079eee9963c..3066f6e2188f9 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx @@ -68,7 +68,7 @@ export const EsqlTool: React.FC = ({ const { navigateToOnechatUrl } = useNavigation(); const form = useEsqlToolForm(); const { reset, formState } = form; - const { errors } = formState; + const { errors, isDirty } = formState; const [showTestFlyout, setShowTestFlyout] = useState(false); const [testToolData, setTestToolData] = useState(form.getValues()); @@ -90,7 +90,10 @@ export const EsqlTool: React.FC = ({ useEffect(() => { if (tool) { - reset(transformEsqlToolToFormData(tool), { keepDefaultValues: true }); + reset(transformEsqlToolToFormData(tool), { + keepDefaultValues: true, + keepDirty: true, + }); } }, [tool, reset]); @@ -127,12 +130,28 @@ export const EsqlTool: React.FC = ({ disabled={Object.keys(errors).length > 0 || isSubmitting} isLoading={isSubmitting} > - {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveButtonLabel', { + {i18n.translate('xpack.onechat.tools.esqlToolFlyout.saveAndTestButtonLabel', { defaultMessage: 'Save and Test', })} ); + const testButton = ( + { + const formData = form.getValues(); + setTestToolData(formData); + setShowTestFlyout(true); + }} + disabled={Object.keys(errors).length > 0} + > + {i18n.translate('xpack.onechat.tools.esqlToolFlyout.testButtonLabel', { + defaultMessage: 'Test', + })} + + ); + return ( @@ -193,6 +212,8 @@ export const EsqlTool: React.FC = ({ {labels.tools.clearButtonLabel} + {!isDirty && {testButton}} + {isDirty && {saveAndTestButton}} {Object.keys(errors).length > 0 ? ( @@ -202,7 +223,6 @@ export const EsqlTool: React.FC = ({ saveButton )} - {saveAndTestButton} diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index adb54b4fa1b9f..07fb3caef5306 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -20,6 +20,7 @@ import { EuiTitle, } from '@elastic/eui'; import React, { useState } from 'react'; +import { useForm, FormProvider, Controller } from 'react-hook-form'; import { ToolDefinition } from '@kbn/onechat-common'; import { i18n } from '@kbn/i18n'; import { CodeEditor } from '@kbn/code-editor'; @@ -58,9 +59,16 @@ export const OnechatTestFlyout: React.FC = ({ tool, onClose, }) => { - const [formData, setFormData] = useState>({}); const [response, setResponse] = useState('{}'); + const form = useForm({ + mode: 'onChange', + }); + const { + handleSubmit, + formState: { errors }, + } = form; + const { executeTool, isLoading: isExecuting } = useExecuteTool({ onSuccess: (data: ExecuteToolResponse) => { setResponse(JSON.stringify(data, null, 2)); @@ -70,16 +78,12 @@ export const OnechatTestFlyout: React.FC = ({ }, }); - const handleInputChange = (name: string, value: string) => { - setFormData((prev) => ({ ...prev, [name]: value })); - }; - - const handleExecute = async () => { + const onSubmit = async (formData: Record) => { if (!tool?.id) return; const toolParams: Record = {}; getParameters(tool).forEach((field) => { - if (formData[field.name]) { + if (field.name) { let value = formData[field.name]; if (field.type === 'integer' || field.type === 'long') { value = parseInt(value, 10); @@ -112,80 +116,99 @@ export const OnechatTestFlyout: React.FC = ({ - - - -
- {i18n.translate('xpack.onechat.tools.testTool.inputsTitle', { - defaultMessage: 'Inputs', - })} -
- - - - {getParameters(tool)?.map((field) => ( - - {field.type === 'integer' || - field.type === 'long' || - field.type === 'double' || - field.type === 'float' ? ( - handleInputChange(field.name, e.target.value)} - placeholder={`Enter ${field.label.toLowerCase()}`} - fullWidth - /> - ) : ( - handleInputChange(field.name, e.target.value)} - placeholder={`Enter ${field.label.toLowerCase()}`} - fullWidth - /> - )} - - ))} + + + + +
+ {i18n.translate('xpack.onechat.tools.testTool.inputsTitle', { + defaultMessage: 'Inputs', + })} +
+ - - - + {getParameters(tool)?.map((field) => ( + - {i18n.translate('xpack.onechat.tools.testTool.executeButton', { - defaultMessage: 'Submit', - })} - - - - - - - -
- {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { - defaultMessage: 'Response', - })} -
- - - - - + {field.type === 'integer' || + field.type === 'long' || + field.type === 'double' || + field.type === 'float' ? ( + ( + + )} + /> + ) : ( + ( + + )} + /> + )} + + ))} + + 0 || !tool?.id} + > + {i18n.translate('xpack.onechat.tools.testTool.executeButton', { + defaultMessage: 'Submit', + })} + + + + + +
+ {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { + defaultMessage: 'Response', + })} +
+ + + + + + ); diff --git a/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts b/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts index 888304846f887..4ab8773af0ae7 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts +++ b/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts @@ -11,7 +11,7 @@ import { useOnechatServices } from '../use_onechat_service'; export interface ExecuteToolParams { toolId: string; - toolParams: Record; + toolParams: Record; } export type ExecuteToolSuccessCallback = (data: ExecuteToolResponse) => void; diff --git a/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts b/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts index 479390be76619..07d634209095d 100644 --- a/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts +++ b/x-pack/platform/plugins/shared/onechat/public/services/tools/tools_service.ts @@ -56,7 +56,7 @@ export class ToolsService { }); } - async execute(toolId: string, toolParams: Record) { + async execute(toolId: string, toolParams: Record) { return await this.http.post('/api/chat/tools/_execute', { body: JSON.stringify({ tool_id: toolId, From c1ce97822ef60010618812ba3de966cc05873ba8 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 25 Aug 2025 20:57:20 +0000 Subject: [PATCH 10/17] [CI] Auto-commit changed files from 'node scripts/notice' --- x-pack/platform/plugins/shared/onechat/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/platform/plugins/shared/onechat/tsconfig.json b/x-pack/platform/plugins/shared/onechat/tsconfig.json index 1982dae0933ff..4814ed07f709e 100644 --- a/x-pack/platform/plugins/shared/onechat/tsconfig.json +++ b/x-pack/platform/plugins/shared/onechat/tsconfig.json @@ -60,5 +60,6 @@ "@kbn/cloud-plugin", "@kbn/es-errors", "@kbn/kibana-utils-plugin", + "@kbn/code-editor", ] } From 0821a1a5ded2027a7383769617b619916478481f Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 25 Aug 2025 21:20:41 +0000 Subject: [PATCH 11/17] [CI] Auto-commit changed files from 'node scripts/eslint_all_files --no-cache --fix' --- .../platform/plugins/shared/onechat/common/http_api/tools.ts | 2 +- .../public/application/components/tools/esql/esql_tool.tsx | 3 ++- .../public/application/components/tools/execute/test_tools.tsx | 2 +- .../public/application/hooks/tools/use_execute_tools.ts | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts b/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts index 0361995b4798e..ee02f39e33fef 100644 --- a/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts +++ b/x-pack/platform/plugins/shared/onechat/common/http_api/tools.ts @@ -10,7 +10,7 @@ import type { ToolDefinitionWithSchema, SerializedOnechatError, } from '@kbn/onechat-common'; -import { ToolResult } from '@kbn/onechat-common/tools/tool_result'; +import type { ToolResult } from '@kbn/onechat-common/tools/tool_result'; export interface ListToolsResponse { results: ToolDefinitionWithSchema[]; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx index f68b35a874267..fb200feb3bbb2 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx @@ -15,7 +15,8 @@ import { useGeneratedHtmlId, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { EsqlToolDefinitionWithSchema, ToolType } from '@kbn/onechat-common'; +import type { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; +import { ToolType } from '@kbn/onechat-common'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import React, { useCallback, useEffect, useState } from 'react'; import { FormProvider } from 'react-hook-form'; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index 07fb3caef5306..6f9b33e221b8f 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -21,7 +21,7 @@ import { } from '@elastic/eui'; import React, { useState } from 'react'; import { useForm, FormProvider, Controller } from 'react-hook-form'; -import { ToolDefinition } from '@kbn/onechat-common'; +import type { ToolDefinition } from '@kbn/onechat-common'; import { i18n } from '@kbn/i18n'; import { CodeEditor } from '@kbn/code-editor'; import { useExecuteTool } from '../../../hooks/tools/use_execute_tools'; diff --git a/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts b/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts index 4ab8773af0ae7..85d8b83d383de 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts +++ b/x-pack/platform/plugins/shared/onechat/public/application/hooks/tools/use_execute_tools.ts @@ -6,7 +6,7 @@ */ import { useMutation } from '@tanstack/react-query'; -import { ExecuteToolResponse } from '../../../../common/http_api/tools'; +import type { ExecuteToolResponse } from '../../../../common/http_api/tools'; import { useOnechatServices } from '../use_onechat_service'; export interface ExecuteToolParams { From f7e49a899ace3f06142653f62f524308f567b046 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Tue, 26 Aug 2025 09:53:52 -0400 Subject: [PATCH 12/17] configure height of codediter and move Response title to left --- .../components/tools/execute/test_tools.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index 6f9b33e221b8f..f5bf06959efc0 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -185,20 +185,22 @@ export const OnechatTestFlyout: React.FC = ({ - - -
- {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { - defaultMessage: 'Response', - })} -
- + +
+ +
+ {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { + defaultMessage: 'Response', + })} +
+ +
Date: Tue, 26 Aug 2025 10:02:40 -0400 Subject: [PATCH 13/17] move height a little --- .../application/components/tools/execute/test_tools.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index f5bf06959efc0..210e8c7f2e8b8 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -185,7 +185,7 @@ export const OnechatTestFlyout: React.FC = ({ - +
@@ -200,7 +200,7 @@ export const OnechatTestFlyout: React.FC = ({ languageId="json" value={response} fullWidth={true} - height="calc(100vh - 200px)" + height="calc(100vh - 275px)" options={{ readOnly: true, fontSize: 14, From 57a6f04675aee243a2d511e0c34cf906a039e495 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Tue, 26 Aug 2025 13:01:19 -0400 Subject: [PATCH 14/17] add 75vh --- .../public/application/components/tools/execute/test_tools.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index 210e8c7f2e8b8..ce89dcc30cbdb 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -200,7 +200,7 @@ export const OnechatTestFlyout: React.FC = ({ languageId="json" value={response} fullWidth={true} - height="calc(100vh - 275px)" + height="75vh" options={{ readOnly: true, fontSize: 14, From 5e29369ef7a5354f6edc391041f31eb67af90596 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Wed, 27 Aug 2025 11:05:32 -0400 Subject: [PATCH 15/17] use code block and use useTool hook --- .../components/tools/esql/esql_tool.tsx | 44 +++---- .../components/tools/execute/test_tools.tsx | 111 +++++++++--------- 2 files changed, 70 insertions(+), 85 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx index fb200feb3bbb2..937667fdfda3f 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx @@ -16,7 +16,6 @@ import { } from '@elastic/eui'; import { css } from '@emotion/react'; import type { EsqlToolDefinitionWithSchema } from '@kbn/onechat-common'; -import { ToolType } from '@kbn/onechat-common'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import React, { useCallback, useEffect, useState } from 'react'; import { FormProvider } from 'react-hook-form'; @@ -71,7 +70,8 @@ export const EsqlTool: React.FC = ({ const { reset, formState } = form; const { errors, isDirty } = formState; const [showTestFlyout, setShowTestFlyout] = useState(false); - const [testToolData, setTestToolData] = useState(form.getValues()); + + const [currentToolId, setCurrentToolId] = useState(tool?.id); const handleClear = useCallback(() => { reset(); @@ -95,6 +95,7 @@ export const EsqlTool: React.FC = ({ keepDefaultValues: true, keepDirty: true, }); + setCurrentToolId(tool.id); } }, [tool, reset]); @@ -120,13 +121,16 @@ export const EsqlTool: React.FC = ({ fill onClick={async () => { const formData = form.getValues(); + let savedTool; if (mode === OnechatEsqlToolFormMode.Edit) { - await saveTool(transformEsqlFormDataForUpdate(formData)); + savedTool = await saveTool(transformEsqlFormDataForUpdate(formData)); } else { - await saveTool(transformEsqlFormDataForCreate(formData)); + savedTool = await saveTool(transformEsqlFormDataForCreate(formData)); + } + if (savedTool?.id) { + setCurrentToolId(savedTool.id); + setShowTestFlyout(true); } - setTestToolData(formData); - setShowTestFlyout(true); }} disabled={Object.keys(errors).length > 0 || isSubmitting} isLoading={isSubmitting} @@ -141,8 +145,6 @@ export const EsqlTool: React.FC = ({ { - const formData = form.getValues(); - setTestToolData(formData); setShowTestFlyout(true); }} disabled={Object.keys(errors).length > 0} @@ -175,30 +177,14 @@ export const EsqlTool: React.FC = ({ ) : ( <> - {showTestFlyout && ( + {showTestFlyout && currentToolId && ( [ - param.name, - { type: param.type, description: param.description }, - ]) - ), - }, - } - : tool - } - onClose={() => setShowTestFlyout(false)} + toolId={currentToolId} + onClose={() => { + setShowTestFlyout(false); + }} /> )} diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index ce89dcc30cbdb..66d3edeb943fd 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -18,32 +18,42 @@ import { EuiFormRow, EuiSpacer, EuiTitle, + EuiCodeBlock, } from '@elastic/eui'; import React, { useState } from 'react'; import { useForm, FormProvider, Controller } from 'react-hook-form'; import type { ToolDefinition } from '@kbn/onechat-common'; import { i18n } from '@kbn/i18n'; -import { CodeEditor } from '@kbn/code-editor'; import { useExecuteTool } from '../../../hooks/tools/use_execute_tools'; import type { ExecuteToolResponse } from '../../../../../common/http_api/tools'; +import { useTool } from '../../../hooks/tools/use_tools'; +import { useNavigation } from '../../../hooks/use_navigation'; +import { appPaths } from '../../../utils/app_paths'; -interface OnechatTestToolFlyoutProps { +interface OnechatTestToolFlyout { isOpen: boolean; isLoading?: boolean; - tool?: ToolDefinition; + toolId: string; onClose: () => void; } -const getParameters = (tool: ToolDefinition | undefined) => { +interface ToolParameter { + name: string; + label: string; + value: string; + type: string; +} + +const getParameters = (tool: ToolDefinition | undefined): Array => { if (!tool) return []; - const fields: Array<{ name: string; label: string; value: string; type: string }> = []; + const fields: Array = []; if (tool.configuration && tool.configuration.params) { const params = tool.configuration.params as Record; Object.entries(params).forEach(([paramName, paramConfig]) => { fields.push({ - name: `${paramName}`, - label: `${paramName}`, + name: paramName, + label: paramName, value: '', type: paramConfig.type || 'text', }); @@ -53,13 +63,15 @@ const getParameters = (tool: ToolDefinition | undefined) => { return fields; }; -export const OnechatTestFlyout: React.FC = ({ - isOpen, - isLoading, - tool, - onClose, -}) => { +export const OnechatTestFlyout: React.FC = ({ toolId, onClose }) => { const [response, setResponse] = useState('{}'); + const { navigateToOnechatUrl } = useNavigation(); + + const { tool } = useTool({ toolId }); + + const handleClose = () => { + navigateToOnechatUrl(appPaths.tools.list); + }; const form = useForm({ mode: 'onChange', @@ -79,8 +91,6 @@ export const OnechatTestFlyout: React.FC = ({ }); const onSubmit = async (formData: Record) => { - if (!tool?.id) return; - const toolParams: Record = {}; getParameters(tool).forEach((field) => { if (field.name) { @@ -95,18 +105,18 @@ export const OnechatTestFlyout: React.FC = ({ }); await executeTool({ - toolId: tool.id, + toolId: tool!.id, toolParams, }); }; return ( - + -

+

{i18n.translate('xpack.onechat.tools.testFlyout.title', { defaultMessage: 'Test Tool', })} @@ -140,31 +150,31 @@ export const OnechatTestFlyout: React.FC = ({ field.type === 'double' || field.type === 'float' ? ( ( + render={({ field: { onChange, value, name } }) => ( onChange(e.target.value)} placeholder={`Enter ${field.label.toLowerCase()}`} fullWidth - isInvalid={!!error} /> )} /> ) : ( ( + render={({ field: { onChange, value, name } }) => ( onChange(e.target.value)} placeholder={`Enter ${field.label.toLowerCase()}`} fullWidth - isInvalid={!!error} /> )} /> @@ -172,13 +182,7 @@ export const OnechatTestFlyout: React.FC = ({ ))} - 0 || !tool?.id} - > + {i18n.translate('xpack.onechat.tools.testTool.executeButton', { defaultMessage: 'Submit', })} @@ -186,28 +190,23 @@ export const OnechatTestFlyout: React.FC = ({ -
- -
- {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { - defaultMessage: 'Response', - })} -
- -
+ +
+ {i18n.translate('xpack.onechat.tools.testTool.responseTitle', { + defaultMessage: 'Response', + })} +
+ - + + {response} + From fb9b79123027c8b055997ec5c9c6cc08632e3aa1 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 27 Aug 2025 15:17:42 +0000 Subject: [PATCH 16/17] [CI] Auto-commit changed files from 'node scripts/notice' --- x-pack/platform/plugins/shared/onechat/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/onechat/tsconfig.json b/x-pack/platform/plugins/shared/onechat/tsconfig.json index 4814ed07f709e..1982dae0933ff 100644 --- a/x-pack/platform/plugins/shared/onechat/tsconfig.json +++ b/x-pack/platform/plugins/shared/onechat/tsconfig.json @@ -60,6 +60,5 @@ "@kbn/cloud-plugin", "@kbn/es-errors", "@kbn/kibana-utils-plugin", - "@kbn/code-editor", ] } From 90a022fc89a10e6b9fcec142b0c54de30f5a14d9 Mon Sep 17 00:00:00 2001 From: meghanmurphy1 Date: Wed, 27 Aug 2025 12:25:49 -0400 Subject: [PATCH 17/17] use css and watch --- .../components/tools/esql/esql_tool.tsx | 16 +++++----- .../components/tools/execute/test_tools.tsx | 30 +++++++++++-------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx index 937667fdfda3f..273c79acfdb42 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/esql/esql_tool.tsx @@ -67,11 +67,11 @@ export const EsqlTool: React.FC = ({ const { euiTheme } = useEuiTheme(); const { navigateToOnechatUrl } = useNavigation(); const form = useEsqlToolForm(); - const { reset, formState } = form; + const { reset, formState, watch } = form; const { errors, isDirty } = formState; const [showTestFlyout, setShowTestFlyout] = useState(false); - const [currentToolId, setCurrentToolId] = useState(tool?.id); + const currentToolId = watch('name'); const handleClear = useCallback(() => { reset(); @@ -95,7 +95,6 @@ export const EsqlTool: React.FC = ({ keepDefaultValues: true, keepDirty: true, }); - setCurrentToolId(tool.id); } }, [tool, reset]); @@ -121,14 +120,12 @@ export const EsqlTool: React.FC = ({ fill onClick={async () => { const formData = form.getValues(); - let savedTool; if (mode === OnechatEsqlToolFormMode.Edit) { - savedTool = await saveTool(transformEsqlFormDataForUpdate(formData)); + await saveTool(transformEsqlFormDataForUpdate(formData)); } else { - savedTool = await saveTool(transformEsqlFormDataForCreate(formData)); + await saveTool(transformEsqlFormDataForCreate(formData)); } - if (savedTool?.id) { - setCurrentToolId(savedTool.id); + if (currentToolId) { setShowTestFlyout(true); } }} @@ -184,6 +181,9 @@ export const EsqlTool: React.FC = ({ toolId={currentToolId} onClose={() => { setShowTestFlyout(false); + if (mode === OnechatEsqlToolFormMode.Create) { + navigateToOnechatUrl(appPaths.tools.list); + } }} /> )} diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx index 66d3edeb943fd..9ce8464dd2f2b 100644 --- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx +++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/execute/test_tools.tsx @@ -20,6 +20,7 @@ import { EuiTitle, EuiCodeBlock, } from '@elastic/eui'; +import { css } from '@emotion/react'; import React, { useState } from 'react'; import { useForm, FormProvider, Controller } from 'react-hook-form'; import type { ToolDefinition } from '@kbn/onechat-common'; @@ -27,8 +28,6 @@ import { i18n } from '@kbn/i18n'; import { useExecuteTool } from '../../../hooks/tools/use_execute_tools'; import type { ExecuteToolResponse } from '../../../../../common/http_api/tools'; import { useTool } from '../../../hooks/tools/use_tools'; -import { useNavigation } from '../../../hooks/use_navigation'; -import { appPaths } from '../../../utils/app_paths'; interface OnechatTestToolFlyout { isOpen: boolean; @@ -65,22 +64,18 @@ const getParameters = (tool: ToolDefinition | undefined): Array = export const OnechatTestFlyout: React.FC = ({ toolId, onClose }) => { const [response, setResponse] = useState('{}'); - const { navigateToOnechatUrl } = useNavigation(); - const { tool } = useTool({ toolId }); - - const handleClose = () => { - navigateToOnechatUrl(appPaths.tools.list); - }; - - const form = useForm({ + const form = useForm>({ mode: 'onChange', }); + const { handleSubmit, formState: { errors }, } = form; + const { tool } = useTool({ toolId }); + const { executeTool, isLoading: isExecuting } = useExecuteTool({ onSuccess: (data: ExecuteToolResponse) => { setResponse(JSON.stringify(data, null, 2)); @@ -111,7 +106,7 @@ export const OnechatTestFlyout: React.FC = ({ toolId, onC }; return ( - + @@ -128,7 +123,13 @@ export const OnechatTestFlyout: React.FC = ({ toolId, onC - +
{i18n.translate('xpack.onechat.tools.testTool.inputsTitle', { @@ -203,7 +204,10 @@ export const OnechatTestFlyout: React.FC = ({ toolId, onC fontSize="s" paddingSize="m" isCopyable={true} - style={{ height: '75vh', overflow: 'auto' }} + css={css` + height: 75vh; + overflow: auto; + `} > {response}