@botonic/react
Version:
Build Chatbots using React
55 lines • 3.75 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { EventAction } from '@botonic/core';
import { useContext, useMemo } from 'react';
import { WebchatContext } from '../../../webchat/context';
import { useKnowledgeBaseInfo } from '../hooks/use-knowledge-base-info';
import { ScrewdriverWrenchSvg, WandSvg } from '../icons';
import { StyledDebugDetail, StyledDebugItemWithIcon, StyledDebugLabel, StyledDebugValue, } from '../styles';
import { GuardrailList, SourcesSection } from './components';
import { LABELS } from './constants';
export const AiAgent = (props) => {
const { previewUtils } = useContext(WebchatContext);
// Collect all sources IDs, chunk IDs and query from all tools
const { allSourcesIds, allChunksIds, query } = useMemo(() => {
const allSourcesIds = [];
const allChunksIds = [];
let query;
props.tools_executed.forEach(tool => {
var _a;
if (((_a = tool.tool_arguments) === null || _a === void 0 ? void 0 : _a.query) &&
typeof tool.tool_arguments.query === 'string') {
query = tool.tool_arguments.query;
}
if (tool.knowledgebase_sources_ids) {
allSourcesIds.push(...tool.knowledgebase_sources_ids);
}
if (tool.knowledgebase_chunks_ids) {
allChunksIds.push(...tool.knowledgebase_chunks_ids);
}
});
return { allSourcesIds, allChunksIds, query };
}, [props.tools_executed]);
const { sources: allSources, chunks: allChunks, chunksWithSources, getIconForSourceType, } = useKnowledgeBaseInfo({
sourceIds: allSourcesIds,
chunkIds: allChunksIds,
messageId: props.messageId,
existingChunksWithSources: props.knowledge_base_chunks_with_sources,
});
const handleSeeChunks = () => {
if (previewUtils === null || previewUtils === void 0 ? void 0 : previewUtils.onClickOpenChunks) {
previewUtils.onClickOpenChunks(chunksWithSources);
}
};
return (_jsxs(_Fragment, { children: [query && (_jsxs(StyledDebugDetail, { children: [_jsx(StyledDebugLabel, { children: LABELS.QUERY }), _jsxs(StyledDebugValue, { children: ["\"", query, "\""] })] })), _jsx(SourcesSection, { sources: allSources, chunks: allChunks, getIconForSourceType: getIconForSourceType, onSeeChunks: handleSeeChunks, label: LABELS.KNOWLEDGE_GATHERED }), props.tools_executed.length > 0 && (_jsxs(StyledDebugDetail, { children: [_jsx(StyledDebugLabel, { children: LABELS.EXECUTED_TOOLS }), props.tools_executed.map((tool, index) => (_jsxs(StyledDebugItemWithIcon, { children: [_jsx(ScrewdriverWrenchSvg, {}), tool.tool_name] }, `${tool.tool_name}-${index}`)))] })), props.tools_executed.length === 0 && (_jsx(StyledDebugDetail, { children: _jsx(StyledDebugLabel, { children: LABELS.NO_TOOLS_EXECUTED }) })), _jsx(GuardrailList, { keyPrefix: 'input', guardrails: props.input_guardrails_triggered }), _jsx(GuardrailList, { keyPrefix: 'output', guardrails: props.output_guardrails_triggered, "$isLastItem": !props.exit && !props.error }), props.exit && (_jsx(StyledDebugDetail, { children: _jsx(StyledDebugLabel, { children: LABELS.EXIT }) })), props.error && (_jsx(StyledDebugDetail, { children: _jsx(StyledDebugLabel, { children: LABELS.ERROR }) }))] }));
};
export const getAiAgentEventConfig = (data) => {
const title = (_jsxs(_Fragment, { children: ["AI Agent triggered ", _jsxs("span", { children: ["- ", data.flow_node_content_id] })] }));
return {
action: EventAction.AiAgent,
title,
component: AiAgent,
icon: _jsx(WandSvg, {}),
collapsible: true,
};
};
//# sourceMappingURL=ai-agent.js.map