[Response Ops][Actions] Allow streaming responses from Generative AI connector

.github/CODEOWNERS

@@ -400,6 +400,7 @@ src/plugins/ftr_apis @elastic/kibana-core
 packages/kbn-ftr-common-functional-services @elastic/kibana-operations @elastic/appex-qa
 packages/kbn-ftr-screenshot-filename @elastic/kibana-operations @elastic/appex-qa
 x-pack/test/functional_with_es_ssl/plugins/cases @elastic/response-ops
+x-pack/examples/gen_ai_streaming_response_example @elastic/response-ops
 packages/kbn-generate @elastic/kibana-operations
 packages/kbn-generate-console-definitions @elastic/platform-deployment-management
 packages/kbn-generate-csv @elastic/appex-sharedux

package.json

@@ -429,6 +429,7 @@
     "@kbn/foo-plugin": "link:x-pack/test/ui_capabilities/common/plugins/foo_plugin",
     "@kbn/ftr-apis-plugin": "link:src/plugins/ftr_apis",
     "@kbn/functional-with-es-ssl-cases-test-plugin": "link:x-pack/test/functional_with_es_ssl/plugins/cases",
+    "@kbn/gen-ai-streaming-response-example-plugin": "link:x-pack/examples/gen_ai_streaming_response_example",
     "@kbn/generate-console-definitions": "link:packages/kbn-generate-console-definitions",
     "@kbn/generate-csv": "link:packages/kbn-generate-csv",
     "@kbn/generate-csv-types": "link:packages/kbn-generate-csv-types",

tsconfig.base.json

@@ -794,6 +794,8 @@
       "@kbn/ftr-screenshot-filename/*": ["packages/kbn-ftr-screenshot-filename/*"],
       "@kbn/functional-with-es-ssl-cases-test-plugin": ["x-pack/test/functional_with_es_ssl/plugins/cases"],
       "@kbn/functional-with-es-ssl-cases-test-plugin/*": ["x-pack/test/functional_with_es_ssl/plugins/cases/*"],
+      "@kbn/gen-ai-streaming-response-example-plugin": ["x-pack/examples/gen_ai_streaming_response_example"],
+      "@kbn/gen-ai-streaming-response-example-plugin/*": ["x-pack/examples/gen_ai_streaming_response_example/*"],
       "@kbn/generate": ["packages/kbn-generate"],
       "@kbn/generate/*": ["packages/kbn-generate/*"],
       "@kbn/generate-console-definitions": ["packages/kbn-generate-console-definitions"],

x-pack/examples/gen_ai_streaming_response_example/README.md

@@ -0,0 +1,5 @@
+## Generative AI Connector Streaming Response Example
+
+This example plugin shows you how to stream a response from a Generative AI connector.
+
+To run this example, use the command `yarn start --run-examples`.

x-pack/examples/gen_ai_streaming_response_example/jest.config.js

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/x-pack/examples/gen_ai_streaming_response_example'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/examples/gen_ai_streaming_response_example',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/examples/gen_ai_streaming_response_example/{public,server}/**/*.{ts,tsx}',
+  ],
+};

x-pack/examples/gen_ai_streaming_response_example/kibana.jsonc

@@ -0,0 +1,20 @@
+{
+  "type": "plugin",
+  "id": "@kbn/gen-ai-streaming-response-example-plugin",
+  "owner": "@elastic/response-ops",
+  "plugin": {
+    "id": "genAiStreamingResponseExample",
+    "server": true,
+    "browser": true,
+    "requiredPlugins": [
+      "triggersActionsUi",
+      "actions",
+      "kibanaReact",
+      "developerExamples"
+    ],
+    "requiredBundles": [
+      "kibanaReact",
+      "stackConnectors"
+    ]
+  }
+}

x-pack/examples/gen_ai_streaming_response_example/public/application.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '@kbn/core/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { GenAiStreamingResponseExampleApp } from './gen_ai_streaming_response_example';
+import { GenAiStreamingResponseExamplePublicStartDeps } from './plugin';
+
+export const renderApp = (
+  core: CoreStart,
+  deps: GenAiStreamingResponseExamplePublicStartDeps,
+  { element }: AppMountParameters
+) => {
+  const { http } = core;
+  ReactDOM.render(
+    <KibanaContextProvider services={{ ...core, ...deps }}>
+      <GenAiStreamingResponseExampleApp http={http} triggersActionsUi={deps.triggersActionsUi} />
+    </KibanaContextProvider>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

x-pack/examples/gen_ai_streaming_response_example/public/components/list_connector.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 React, { useCallback, useMemo, useState } from 'react';
+import { EuiFlexItem, EuiFormRow, EuiLink, EuiSuperSelect, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { LoadConnectorResult } from '../gen_ai_streaming_response_example';
+
+export interface ListConnectorsProps {
+  connectors: LoadConnectorResult[];
+  setIsConnectorModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  onConnectorSelect: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const ListConnectors = ({
+  connectors,
+  onConnectorSelect,
+  setIsConnectorModalVisible,
+}: ListConnectorsProps) => {
+  const [value, setValue] = useState<string>();
+  const connectorOptions = useMemo(() => {
+    return (
+      connectors.map((connector) => {
+        return {
+          value: connector.id,
+          inputDisplay: connector.name,
+          dropdownDisplay: (
+            <React.Fragment key={connector.id}>
+              <strong>{connector.name}</strong>
+            </React.Fragment>
+          ),
+        };
+      }) ?? []
+    );
+  }, [connectors]);
+
+  const onSelectConnector = useCallback(
+    (v: string) => {
+      setValue(v);
+      onConnectorSelect(v);
+    },
+    [onConnectorSelect]
+  );
+  return (
+    <>
+      <EuiFlexItem>
+        <EuiFormRow
+          label={i18n.translate(
+            'genAiStreamingResponseExample.app.component.selectConnectorLabel',
+            {
+              defaultMessage: 'Select a Generative AI Connector',
+            }
+          )}
+          labelAppend={
+            <EuiText size="xs">
+              <EuiLink onClick={() => setIsConnectorModalVisible(true)}>
+                {i18n.translate(
+                  'genAiStreamingResponseExample.app.component.selectConnectorLabelAppend',
+                  {
+                    defaultMessage: 'or add another',
+                  }
+                )}
+              </EuiLink>
+            </EuiText>
+          }
+        >
+          <EuiSuperSelect
+            valueOfSelected={value}
+            options={connectorOptions}
+            onChange={onSelectConnector}
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+    </>
+  );
+};

x-pack/examples/gen_ai_streaming_response_example/public/components/setup_connector.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 React from 'react';
+import { GenAiLogo } from '@kbn/stack-connectors-plugin/public/common';
+import { EuiFlexGroup, EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export interface SetupConnectorProps {
+  setIsConnectorModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const SetupConnector = ({ setIsConnectorModalVisible }: SetupConnectorProps) => {
+  return (
+    <EuiFlexGroup gutterSize="l">
+      <EuiFlexItem grow={false}>
+        <EuiCard
+          layout="horizontal"
+          icon={<EuiIcon size="xl" type={GenAiLogo} />}
+          title={i18n.translate(
+            'genAiStreamingResponseExample.app.component.addConnectorCardTitle',
+            {
+              defaultMessage: 'Add Generative AI Connector',
+            }
+          )}
+          description={i18n.translate(
+            'genAiStreamingResponseExample.app.component.addConnectorCardDescription',
+            {
+              defaultMessage: 'Configure a connector to continue',
+            }
+          )}
+          onClick={() => setIsConnectorModalVisible(true)}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};