OLS-2722: olsToolUIs initial support

Allows plugins to define 'ols.tool-ui' extensions to map the tools
to react components to be rendered when the tool gets called.

Sample extensions registration:

```json
{
  "type": "ols.tool-ui",
  "properties": {
    "id": "my-obs/my-tool",
    "component": {
      "$codeRef": "MyToolUI"
    }
  }
}
```

The ToolUI implemntation receives the tool details in it's argument:

```ts
type MyTool = {
  name: 'my-tool';
  args: object,
  // ...
};

export const MyToolUI React.FC<{ tool: MyTool }> = ({ tool }) => {
  // component implementation
}
```

Author: iNecas

src/components/OlsToolUIs.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Map as ImmutableMap } from 'immutable';
+import { useSelector } from 'react-redux';
+import { State } from '../redux-reducers';
+import { useToolUIMapping } from '../hooks/useToolUIMapping';
+import type { OlsToolUIComponent, Tool } from '../types';
+
+type OlsToolUIProps = {
+  tool: Tool;
+  toolUIComponent: OlsToolUIComponent;
+};
+
+export const OlsToolUI: React.FC<OlsToolUIProps> = ({ tool, toolUIComponent: toolUIElement }) => {
+  const ToolComponent = toolUIElement;
+  return <ToolComponent tool={tool} />;
+};
+
+type OlsUIToolsProps = {
+  entryIndex: number;
+};
+
+export const OlsToolUIs: React.FC<OlsUIToolsProps> = ({ entryIndex }) => {
+  const [toolUIMapping] = useToolUIMapping();
+
+  const toolsData: ImmutableMap<string, ImmutableMap<string, unknown>> = useSelector((s: State) =>
+    s.plugins?.ols?.getIn(['chatHistory', entryIndex, 'tools']),
+  );
+
+  const olsToolsWithUI = toolsData
+    .map((value) => {
+      const tool = value.toJS() as Tool;
+      const olsUiID = tool.tool_meta?.olsUi?.id;
+      const toolUIComponent = olsUiID && toolUIMapping[olsUiID];
+      return { tool, toolUIComponent };
+    })
+    .filter(({ toolUIComponent }) => !!toolUIComponent);
+
+  return (
+    <>
+      {olsToolsWithUI
+        .map(({ tool, toolUIComponent }, toolID) => (
+          <OlsToolUI key={`ols-app-${toolID}`} tool={tool} toolUIComponent={toolUIComponent} />
+        ))
+        .valueSeq()}
+    </>
+  );
+};
+
+export default OlsToolUIs;

src/components/Prompt.tsx

@@ -581,8 +581,8 @@ const Prompt: React.FC<PromptProps> = ({ scrollIntoView }) => {
                 const { args, id, name: toolName } = json.data;
                 dispatch(chatHistoryUpdateTool(chatEntryID, id, { name: toolName, args }));
               } else if (json.event === 'tool_result') {
-                const { content, id, status } = json.data;
-                dispatch(chatHistoryUpdateTool(chatEntryID, id, { content, status }));
+                const { content, id, status, tool_meta } = json.data;
+                dispatch(chatHistoryUpdateTool(chatEntryID, id, { content, status, tool_meta }));
               } else if (json.event === 'error') {
                 dispatchTokens.flush();
                 dispatch(

src/components/ResponseTools.tsx

@@ -6,6 +6,7 @@ import { CodeIcon, InfoCircleIcon } from '@patternfly/react-icons';
 
 import { openToolSet } from '../redux-actions';
 import { State } from '../redux-reducers';
+import OlsToolUIs from './OlsToolUIs';
 
 type ToolProps = {
   entryIndex: number;
@@ -47,11 +48,14 @@ const ResponseTools: React.FC<ResponseToolsProps> = ({ entryIndex }) => {
   );
 
   return (
-    <LabelGroup numLabels={4}>
-      {tools.keySeq().map((toolID) => (
-        <ToolLabel entryIndex={entryIndex} key={toolID} toolID={toolID} />
-      ))}
-    </LabelGroup>
+    <>
+      <LabelGroup numLabels={4}>
+        {tools.keySeq().map((toolID) => (
+          <ToolLabel entryIndex={entryIndex} key={toolID} toolID={toolID} />
+        ))}
+      </LabelGroup>
+      <OlsToolUIs entryIndex={entryIndex} />
+    </>
   );
 };
 

src/hooks/useToolUIMapping.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useResolvedExtensions } from '@openshift-console/dynamic-plugin-sdk';
+import type {
+  CodeRef,
+  Extension,
+  ExtensionDeclaration,
+} from '@openshift-console/dynamic-plugin-sdk/lib/types';
+import type { OlsToolUIComponent } from '../types';
+
+type ToolUIExtensionProperties = {
+  /** Id of the component (as refferrenced by the mcp tool) */
+  id: string;
+  /** The component to be rendered when the MCP tool matches. */
+  component: CodeRef<OlsToolUIComponent>;
+};
+
+type ToolUIExtension = ExtensionDeclaration<'ols.tool-ui', ToolUIExtensionProperties>;
+
+const isToolUIExtension = (e: Extension): e is ToolUIExtension => e.type === 'ols.tool-ui';
+
+export const useToolUIExtensions = () => useResolvedExtensions(isToolUIExtension);
+
+export const useToolUIMapping = (): [Record<string, OlsToolUIComponent>, boolean] => {
+  const [extensions, resolved] = useToolUIExtensions();
+
+  const mapping = React.useMemo(() => {
+    const result: Record<string, OlsToolUIComponent> = {};
+    extensions.forEach((extension) => {
+      const { id, component } = extension.properties as {
+        id: string;
+        component: OlsToolUIComponent;
+      };
+      result[id] = component;
+    });
+    return result;
+  }, [extensions]);
+
+  return [mapping, resolved];
+};

src/types.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Map as ImmutableMap } from 'immutable';
 
 import { ErrorType } from './error';
@@ -27,12 +28,15 @@ export type ReferencedDoc = {
 };
 
 export type Tool = {
-  args: { [key: string]: Array<string> };
+  args: { [key: string]: string };
   content: string;
   name: string;
-  status: 'error' | 'success';
+  status: 'error' | 'success' | 'truncated';
+  tool_meta?: { olsUi?: { id: string } };
 };
 
+export type OlsToolUIComponent = React.ComponentType<{ tool: Tool }>;
+
 type ChatEntryUser = {
   attachments: { [key: string]: Attachment };
   text: string;