@red-hat-developer-hub/backstage-plugin-lightspeed 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+## @red-hat-developer-hub/backstage-plugin-lightspeed
+
+## 0.2.0
+
+### Minor Changes
+
+- c113d1a: - add RBAC permission support.
+  - add multiple chats, chat creation, deletion and searching. [#2501](https://github.com/janus-idp/backstage-plugins/pull/2501)
+
+### Patch Changes
+
+- Updated dependencies [c113d1a]
+  - @red-hat-developer-hub/backstage-plugin-lightspeed-common@0.1.1
+
+## 0.1.3
+
+### Patch Changes
+
+- 9fccf3f: Migrated from [janus-idp/backstage-plugins](https://github.com/janus-idp/backstage-plugins).
+
+### Features
+
+- **lightspeed:** add a new lightspeed plugin with basic implementation of chat ([#1889](https://github.com/janus-idp/backstage-plugins/issues/1889)) ([cb80e38](https://github.com/janus-idp/backstage-plugins/commit/cb80e38d4d35a8097cd84b57c1b8eb12ec5af6b4))
+- **lightspeed:** add api client ([#2020](https://github.com/janus-idp/backstage-plugins/issues/2020)) ([ff09574](https://github.com/janus-idp/backstage-plugins/commit/ff095742c542869c7a330d391bd619e97473218c))

package/README.md

@@ -0,0 +1,179 @@
+# Lightspeed plugin for Backstage
+
+The Lightspeed plugin enables you to interact with any LLM server running a model with OpenAI's API compatibility.
+
+## For administrators
+
+### Prerequisites
+
+- Follow the lightspeed backend plugin [README](https://github.com/janus-idp/backstage-plugins/tree/main/plugins/lightspeed-backend) to integrate lightspeed backend in your Backstage instance.
+
+**Note**
+
+### Permission Framework Support
+
+The Lightspeed plugin has support for the permission framework.
+
+- When [RBAC permission](https://github.com/backstage/community-plugins/tree/main/workspaces/rbac/plugins/rbac-backend#installation) framework is enabled, for non-admin users to access lightspeed UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file named `rbac-policy.csv`:
+
+```CSV
+p, role:default/team_a, lightspeed.conversations.read, read, allow
+p, role:default/team_a, lightspeed.conversations.create, create, allow
+p, role:default/team_a, lightspeed.conversations.delete, delete, allow
+
+g, user:default/<your-user-name>, role:default/team_a
+
+```
+
+You can specify the path to this configuration file in your application configuration:
+
+```yaml
+permission:
+  enabled: true
+  rbac:
+    policies-csv-file: /some/path/rbac-policy.csv
+    policyFileReload: true
+```
+
+### Installation
+
+1. Install the Lightspeed plugin using the following command:
+
+   ```console
+   yarn workspace app add @red-hat-developer-hub/backstage-plugin-lightspeed
+   ```
+
+### Configuration
+
+1. Add a new nav item **Lightspeed** in App `packages/app/src/App.tsx`:
+
+   ```tsx title="packages/app/src/components/App.tsx"
+   /* highlight-add-next-line */ import { LightspeedPage } from '@red-hat-developer-hub/backstage-plugin-lightspeed';
+
+   <Route path="/lightspeed" element={<LightspeedPage />} />;
+   ```
+
+2. Enable **Lightspeed** page in `packages/app/src/components/Root/Root.tsx`:
+
+   ```tsx title="packages/app/src/components/Root/Root.tsx"
+   /* highlight-add-next-line */ import { LightspeedIcon } from '@red-hat-developer-hub/backstage-plugin-lightspeed';
+
+   <SidebarItem
+     icon={LightspeedIcon as IconComponent}
+     to="lightspeed"
+     text="Lightspeed"
+   />;
+   ```
+
+## For users
+
+### Using the Lightspeed plugin in Backstage
+
+Lightspeed is a front-end plugin that enables you to interact with any LLM server running a model with OpenAI's API compatibility.
+
+#### Prerequisites
+
+- Your Backstage application is installed and running.
+- You have installed the Lightspeed plugin. For installation process, see [Installation](#installation).
+
+#### Procedure
+
+1. Open your Backstage application and select a Lightspeed nav item from the **Navigation**.
+2. Ask you questions to the Lightspeed chatbot.
+
+## Loading as Dynamic Plugin
+
+#### To install Lightspeed plugin into Red Hat Developer Hub or Janus IDP via Helm use this configuration:
+
+- Load the lightspeed plugin from the npm registry
+
+```
+global:
+  dynamic:
+    includes:
+      - dynamic-plugins.default.yaml
+    plugins:
+      - package: '@red-hat-developer-hub/backstage-plugin-lightspeed@0.1.2'
+        integrity: >-
+          sha512-bCKETjVhjZFLx7ImSFcptA3yvwJhFLFTFhMo/LvdVc0K5E76/SpEEkYBPup4aEQMivZBJKn0iVQFBuduChCDpA==
+        disabled: false
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              janus-idp.backstage-plugin-lightspeed:
+                appIcons:
+                  - name: LightspeedIcon
+                    module: LightspeedPlugin
+                    importName: LightspeedIcon
+                dynamicRoutes:
+                  - path: /lightspeed
+                    importName: LightspeedPage
+                    module: LightspeedPlugin
+                    menuItem:
+                      icon: LightspeedIcon
+                      text: Lightspeed
+```
+
+- add the lightspeed configuration in the `app-config.yaml`
+
+```
+lightspeed:
+  servers:
+    - id: <server_id>
+      url: <server_URL>
+      token: <api_key>
+```
+
+---
+
+#### To install this plugin locally in [backstage-showcase](https://github.com/janus-idp/backstage-showcase) application as a dynamic plugin.
+
+Follow the below steps -
+
+- Export dynamic plugin assets. This will build and create the static assets for the plugin and put it inside dist-scalprum folder.
+
+`yarn install`
+
+`yarn tsc`
+
+`yarn build`
+
+`yarn export-dynamic`
+
+- Package and copy dist-scalprum folder assets to dynamic-plugins-root folder in [backstage-showcase](https://github.com/janus-idp/backstage-showcase) application.
+
+To Package the plugin, run the below commands.
+
+```
+pkg=../plugins/lightspeed
+archive=$(npm pack $pkg)
+tar -xzf "$archive" && rm "$archive"
+mv package $(echo $archive | sed -e 's:\.tgz$::')
+```
+
+- Add the extension point inside the `app-config.yaml` or `app-config.local.yaml` file.
+
+```
+
+lightspeed:
+  servers:
+    - id: <server id>
+      url: <serverURL>
+      token: <api key> # dummy token
+
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-lightspeed:
+      appIcons:
+        - name: LightspeedIcon
+          module: LightspeedPlugin
+          importName: LightspeedIcon
+      dynamicRoutes:
+        - path: /lightspeed
+          importName: LightspeedPage
+          module: LightspeedPlugin
+          menuItem:
+            icon: LightspeedIcon
+            text: Lightspeed
+
+```

package/app-config.dynamic.yaml

@@ -0,0 +1,14 @@
+dynamicPlugins:
+  frontend:
+    red-hat-developer-hub.backstage-plugin-lightspeed:
+      appIcons:
+        - name: LightspeedIcon
+          module: LightspeedPlugin
+          importName: LightspeedIcon
+      dynamicRoutes:
+        - path: /lightspeed
+          importName: LightspeedPage
+          module: LightspeedPlugin
+          menuItem:
+            icon: LightspeedIcon
+            text: Lightspeed

package/config.d.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface Config {
+  /**
+   * Configuration required for using lightspeed
+   * @visibility frontend
+   */
+  lightspeed: {
+    /**
+     * @visibility frontend
+     */
+    servers: Array</**
+     * @visibility frontend
+     */
+    {
+      /**
+       * The id of the server.
+       * @visibility frontend
+       */
+      id: string;
+      /**
+       * The url of the server.
+       * @visibility frontend
+       */
+      url: string;
+    }>;
+  };
+}

package/dist/api/LightspeedApiClient.esm.js

@@ -0,0 +1,108 @@
+class LightspeedApiClient {
+  configApi;
+  fetchApi;
+  constructor(options) {
+    this.configApi = options.configApi;
+    this.fetchApi = options.fetchApi;
+  }
+  async getBaseUrl() {
+    return `${this.configApi.getString("backend.baseUrl")}/api/lightspeed`;
+  }
+  getServerUrl() {
+    return `${this.configApi.getConfigArray("lightspeed.servers")[0].getOptionalString("url")}`;
+  }
+  async createMessage(prompt, selectedModel, conversation_id) {
+    const baseUrl = await this.getBaseUrl();
+    const response = await this.fetchApi.fetch(`${baseUrl}/v1/query`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        conversation_id,
+        serverURL: this.getServerUrl(),
+        model: selectedModel,
+        query: prompt,
+        historyLength: 10
+      })
+    });
+    if (!response.body) {
+      throw new Error("Readable stream is not supported or there is no body.");
+    }
+    if (!response.ok) {
+      throw new Error(
+        `failed to fetch data, status ${response.status}: ${response.statusText}`
+      );
+    }
+    return response.body.getReader();
+  }
+  async fetcher(url) {
+    const response = await this.fetchApi.fetch(url, {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(
+        `failed to fetch data, status ${response.status}: ${response.statusText}`
+      );
+    }
+    return response;
+  }
+  async getAllModels() {
+    const baseUrl = await this.getBaseUrl();
+    const result = await this.fetcher(`${baseUrl}/v1/models`);
+    const response = await result.json();
+    return response?.data ? response.data : [];
+  }
+  async getConversationMessages(conversation_id) {
+    const baseUrl = await this.getBaseUrl();
+    const result = await this.fetcher(
+      `${baseUrl}/conversations/${encodeURIComponent(conversation_id)}`
+    );
+    return await result.json();
+  }
+  async getConversations() {
+    const baseUrl = await this.getBaseUrl();
+    const result = await this.fetcher(`${baseUrl}/conversations`);
+    return await result.json();
+  }
+  async createConversation() {
+    const baseUrl = await this.getBaseUrl();
+    const response = await this.fetchApi.fetch(`${baseUrl}/conversations`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({})
+    });
+    if (!response.body) {
+      throw new Error("Something went wrong.");
+    }
+    if (!response.ok) {
+      throw new Error(
+        `failed to create conversation, status ${response.status}: ${response.statusText}`
+      );
+    }
+    return await response.json();
+  }
+  async deleteConversation(conversation_id) {
+    const baseUrl = await this.getBaseUrl();
+    const response = await this.fetchApi.fetch(
+      `${baseUrl}/conversations/${encodeURIComponent(conversation_id)}`,
+      {
+        method: "DELETE",
+        headers: {}
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `failed to delete conversation, status ${response.status}: ${response.statusText}`
+      );
+    }
+    return { success: true };
+  }
+}
+
+export { LightspeedApiClient };
+//# sourceMappingURL=LightspeedApiClient.esm.js.map

package/dist/api/LightspeedApiClient.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightspeedApiClient.esm.js","sources":["../../src/api/LightspeedApiClient.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { ConfigApi, FetchApi } from '@backstage/core-plugin-api';\n\nimport { LightspeedAPI } from './api';\n\nexport type Options = {\n  configApi: ConfigApi;\n  fetchApi: FetchApi;\n};\n\nexport class LightspeedApiClient implements LightspeedAPI {\n  private readonly configApi: ConfigApi;\n  private readonly fetchApi: FetchApi;\n\n  constructor(options: Options) {\n    this.configApi = options.configApi;\n    this.fetchApi = options.fetchApi;\n  }\n\n  async getBaseUrl() {\n    return `${this.configApi.getString('backend.baseUrl')}/api/lightspeed`;\n  }\n\n  getServerUrl() {\n    // Currently supports a single llm server\n    return `${this.configApi\n      .getConfigArray('lightspeed.servers')[0]\n      .getOptionalString('url')}`;\n  }\n\n  async createMessage(\n    prompt: string,\n    selectedModel: string,\n    conversation_id: string,\n  ) {\n    const baseUrl = await this.getBaseUrl();\n\n    const response = await this.fetchApi.fetch(`${baseUrl}/v1/query`, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({\n        conversation_id,\n        serverURL: this.getServerUrl(),\n        model: selectedModel,\n        query: prompt,\n        historyLength: 10,\n      }),\n    });\n\n    if (!response.body) {\n      throw new Error('Readable stream is not supported or there is no body.');\n    }\n\n    if (!response.ok) {\n      throw new Error(\n        `failed to fetch data, status ${response.status}: ${response.statusText}`,\n      );\n    }\n    return response.body.getReader();\n  }\n\n  private async fetcher(url: string) {\n    const response = await this.fetchApi.fetch(url, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    });\n    if (!response.ok) {\n      throw new Error(\n        `failed to fetch data, status ${response.status}: ${response.statusText}`,\n      );\n    }\n    return response;\n  }\n\n  async getAllModels() {\n    const baseUrl = await this.getBaseUrl();\n    const result = await this.fetcher(`${baseUrl}/v1/models`);\n    const response = await result.json();\n    return response?.data ? response.data : [];\n  }\n\n  async getConversationMessages(conversation_id: string) {\n    const baseUrl = await this.getBaseUrl();\n    const result = await this.fetcher(\n      `${baseUrl}/conversations/${encodeURIComponent(conversation_id)}`,\n    );\n    return await result.json();\n  }\n\n  async getConversations() {\n    const baseUrl = await this.getBaseUrl();\n    const result = await this.fetcher(`${baseUrl}/conversations`);\n    return await result.json();\n  }\n\n  async createConversation() {\n    const baseUrl = await this.getBaseUrl();\n\n    const response = await this.fetchApi.fetch(`${baseUrl}/conversations`, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({}),\n    });\n\n    if (!response.body) {\n      throw new Error('Something went wrong.');\n    }\n\n    if (!response.ok) {\n      throw new Error(\n        `failed to create conversation, status ${response.status}: ${response.statusText}`,\n      );\n    }\n    return await response.json();\n  }\n\n  async deleteConversation(conversation_id: string) {\n    const baseUrl = await this.getBaseUrl();\n\n    const response = await this.fetchApi.fetch(\n      `${baseUrl}/conversations/${encodeURIComponent(conversation_id)}`,\n      {\n        method: 'DELETE',\n        headers: {},\n      },\n    );\n\n    if (!response.ok) {\n      throw new Error(\n        `failed to delete conversation, status ${response.status}: ${response.statusText}`,\n      );\n    }\n    return { success: true };\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/api/api.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const lightspeedApiRef = createApiRef({
+  id: "plugin.lightspeed.service"
+});
+
+export { lightspeedApiRef };
+//# sourceMappingURL=api.esm.js.map

package/dist/api/api.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.esm.js","sources":["../../src/api/api.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { createApiRef } from '@backstage/core-plugin-api';\n\nimport OpenAI from 'openai';\n\nimport { BaseMessage, ConversationList } from '../types';\n\nexport type LightspeedAPI = {\n  getAllModels: () => Promise<OpenAI.Models.Model[]>;\n  getConversationMessages: (conversation_id: string) => Promise<BaseMessage[]>;\n  createConversation: () => Promise<{ conversation_id: string }>;\n  createMessage: (\n    prompt: string,\n    selectedModel: string,\n    conversation_id: string,\n  ) => Promise<ReadableStreamDefaultReader>;\n  deleteConversation: (\n    conversation_id: string,\n  ) => Promise<{ success: boolean }>;\n  getConversations: () => Promise<ConversationList>;\n};\n\nexport const lightspeedApiRef = createApiRef<LightspeedAPI>({\n  id: 'plugin.lightspeed.service',\n});\n"],"names":[],"mappings":";;AAoCO,MAAM,mBAAmB,YAA4B,CAAA;AAAA,EAC1D,EAAI,EAAA;AACN,CAAC;;;;"}

package/dist/components/LightSpeedChat.esm.js

@@ -0,0 +1,239 @@
+import React__default from 'react';
+import { ErrorPanel } from '@backstage/core-components';
+import { makeStyles, Box } from '@material-ui/core';
+import { DropdownItem, Title } from '@patternfly/react-core';
+import { Chatbot, ChatbotDisplayMode, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, ChatbotContent, ChatbotFooter, MessageBar, ChatbotFootnote } from '@patternfly/virtual-assistant';
+import ChatbotConversationHistoryNav from '@patternfly/virtual-assistant/dist/dynamic/ChatbotConversationHistoryNav';
+import { useQueryClient } from '@tanstack/react-query';
+import { useBackstageUserIdentity } from '../hooks/useBackstageUserIdentity.esm.js';
+import { useConversationMessages } from '../hooks/useConversationMessages.esm.js';
+import { useConversations } from '../hooks/useConversations.esm.js';
+import { useCreateConversation } from '../hooks/useCreateConversation.esm.js';
+import { useDeleteConversation } from '../hooks/useDeleteConversation.esm.js';
+import { useLightspeedDeletePermission } from '../hooks/useLightspeedDeletePermission.esm.js';
+import { getCategorizeMessages, getFootnoteProps } from '../utils/lightspeed-chatbox-utils.esm.js';
+import { LightspeedChatBox } from './LightspeedChatBox.esm.js';
+import { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    "&.pf-chatbot__content": {
+      padding: 0
+    }
+  },
+  header: {
+    padding: `${theme.spacing(3)}px !important`
+  },
+  drawerActions: {
+    "&.pf-v6-c-drawer__actions": {
+      flexDirection: "row-reverse"
+    }
+  },
+  headerTitle: {
+    justifyContent: "left !important"
+  },
+  footer: {
+    "&.pf-chatbot__footer": {
+      padding: "0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg)"
+    }
+  }
+}));
+const LightspeedChat = ({
+  selectedModel,
+  userName,
+  avatar,
+  profileLoading,
+  handleSelectedModel,
+  models
+}) => {
+  const classes = useStyles();
+  const user = useBackstageUserIdentity();
+  const [filterValue, setFilterValue] = React__default.useState("");
+  const [announcement, setAnnouncement] = React__default.useState("");
+  const [conversationId, setConversationId] = React__default.useState("");
+  const [isDrawerOpen, setIsDrawerOpen] = React__default.useState(true);
+  const [newChatCreated, setNewChatCreated] = React__default.useState(true);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React__default.useState(false);
+  const [error, setError] = React__default.useState(null);
+  const queryClient = useQueryClient();
+  const { data: conversations = [] } = useConversations();
+  const { mutateAsync: createConversation } = useCreateConversation();
+  const { mutateAsync: deleteConversation } = useDeleteConversation();
+  const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();
+  React__default.useEffect(() => {
+    if (user) {
+      createConversation().then(({ conversation_id }) => {
+        setConversationId(conversation_id);
+      }).catch((e) => {
+        console.warn(e);
+        setError(e);
+      });
+    }
+  }, [user, setConversationId, createConversation]);
+  const onComplete = (message) => {
+    setIsSendButtonDisabled(false);
+    setAnnouncement(`Message from Bot: ${message}`);
+    queryClient.invalidateQueries({
+      queryKey: ["conversations"]
+    });
+  };
+  const { conversationMessages, handleInputPrompt, scrollToBottomRef } = useConversationMessages(
+    conversationId,
+    userName,
+    selectedModel,
+    avatar,
+    onComplete
+  );
+  const [messages, setMessages] = React__default.useState(conversationMessages);
+  React__default.useEffect(() => {
+    setTimeout(() => {
+      scrollToBottomRef.current?.scrollIntoView({ behavior: "auto" });
+    }, 10);
+  }, [messages, scrollToBottomRef.current]);
+  const sendMessage = (message) => {
+    setNewChatCreated(false);
+    setAnnouncement(
+      `Message from User: ${prompt}. Message from Bot is loading.`
+    );
+    handleInputPrompt(message);
+    setIsSendButtonDisabled(true);
+  };
+  const onNewChat = React__default.useCallback(() => {
+    (async () => {
+      setMessages([]);
+      const { conversation_id } = await createConversation();
+      setConversationId(conversation_id);
+      setNewChatCreated(true);
+    })();
+  }, [createConversation, setConversationId, setMessages]);
+  const additionalMessageProps = React__default.useCallback(
+    (conversationSummary) => ({
+      menuItems: /* @__PURE__ */ React__default.createElement(
+        DropdownItem,
+        {
+          isDisabled: !hasDeleteAccess,
+          onClick: async () => {
+            try {
+              await deleteConversation({
+                conversation_id: conversationSummary.conversation_id,
+                invalidateCache: false
+              });
+              onNewChat();
+            } catch (e) {
+              console.warn(e);
+            }
+          }
+        },
+        "Delete"
+      )
+    }),
+    [deleteConversation, onNewChat, hasDeleteAccess]
+  );
+  const categorizedMessages = getCategorizeMessages(
+    conversations,
+    additionalMessageProps
+  );
+  const filterConversations = React__default.useCallback(
+    (targetValue) => {
+      const filteredConversations = Object.entries(categorizedMessages).reduce(
+        (acc, [key, items]) => {
+          const filteredItems = items.filter(
+            (item) => item.text.toLocaleLowerCase("en-US").includes(targetValue.toLocaleLowerCase("en-US"))
+          );
+          if (filteredItems.length > 0) {
+            acc[key] = filteredItems;
+          }
+          return acc;
+        },
+        {}
+      );
+      return filteredConversations;
+    },
+    [categorizedMessages]
+  );
+  React__default.useEffect(() => {
+    setMessages(conversationMessages);
+  }, [conversationMessages]);
+  const onSelectActiveItem = React__default.useCallback(
+    (_, selectedItem) => {
+      setNewChatCreated(false);
+      setConversationId((c_id) => {
+        if (c_id !== selectedItem) {
+          return String(selectedItem);
+        }
+        return c_id;
+      });
+    },
+    [setConversationId]
+  );
+  const welcomePrompts = newChatCreated ? [
+    {
+      title: "Topic 1",
+      message: "Helpful prompt for Topic 1",
+      onClick: () => sendMessage("Helpful prompt for Topic 1")
+    },
+    {
+      title: "Topic 2",
+      message: "Helpful prompt for Topic 2",
+      onClick: () => sendMessage("Helpful prompt for Topic 2")
+    }
+  ] : [];
+  const handleFilter = React__default.useCallback((value) => {
+    setFilterValue(value);
+  }, []);
+  const onDrawerToggle = React__default.useCallback(() => {
+    setIsDrawerOpen((isOpen) => !isOpen);
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ React__default.createElement(Box, { padding: 1 }, /* @__PURE__ */ React__default.createElement(ErrorPanel, { error }));
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Chatbot, { displayMode: ChatbotDisplayMode.embedded }, /* @__PURE__ */ React__default.createElement(ChatbotHeader, { className: classes.header }, /* @__PURE__ */ React__default.createElement(ChatbotHeaderMain, null, /* @__PURE__ */ React__default.createElement(
+    ChatbotHeaderMenu,
+    {
+      "aria-expanded": isDrawerOpen,
+      onMenuToggle: () => setIsDrawerOpen(!isDrawerOpen)
+    }
+  ), /* @__PURE__ */ React__default.createElement(ChatbotHeaderTitle, { className: classes.headerTitle }, /* @__PURE__ */ React__default.createElement(Title, { headingLevel: "h1", size: "3xl" }, "Developer Hub Lightspeed"))), /* @__PURE__ */ React__default.createElement(
+    LightspeedChatBoxHeader,
+    {
+      selectedModel,
+      handleSelectedModel: (item) => handleSelectedModel(item),
+      models
+    }
+  )), /* @__PURE__ */ React__default.createElement(
+    ChatbotConversationHistoryNav,
+    {
+      displayMode: ChatbotDisplayMode.embedded,
+      onDrawerToggle,
+      isDrawerOpen,
+      setIsDrawerOpen,
+      activeItemId: conversationId,
+      onSelectActiveItem,
+      conversations: filterConversations(filterValue),
+      onNewChat: newChatCreated ? void 0 : onNewChat,
+      handleTextInputChange: handleFilter,
+      drawerContent: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ChatbotContent, { className: classes.content }, /* @__PURE__ */ React__default.createElement(
+        LightspeedChatBox,
+        {
+          userName,
+          messages,
+          profileLoading,
+          announcement,
+          ref: scrollToBottomRef,
+          welcomePrompts
+        }
+      )), /* @__PURE__ */ React__default.createElement(ChatbotFooter, { className: classes.footer }, /* @__PURE__ */ React__default.createElement(
+        MessageBar,
+        {
+          onSendMessage: sendMessage,
+          isSendButtonDisabled,
+          hasAttachButton: false,
+          hasMicrophoneButton: true
+        }
+      ), /* @__PURE__ */ React__default.createElement(ChatbotFootnote, { ...getFootnoteProps() })))
+    }
+  )));
+};
+
+export { LightspeedChat };
+//# sourceMappingURL=LightSpeedChat.esm.js.map