@nospt/backstage-plugin-librechat 0.1.0

package/README.md

@@ -0,0 +1,109 @@
+# @nospt/backstage-plugin-librechat
+
+> Frontend plugin that adds an AI chat bubble to your Backstage app, powered by the [LibreChat](https://www.librechat.ai/) Agents API.
+
+This is the **frontend** half of the LibreChat plugin. It renders a floating chat bubble across every page of your Backstage app, captures the context of the page you're viewing, streams responses in real time, and renders them as Markdown.
+
+It must be paired with the backend plugin, [`@nospt/backstage-plugin-librechat-backend`](../librechat-backend/README.md), which proxies requests to LibreChat and keeps your API keys server-side.
+
+## Features
+
+- **Floating chat bubble** — persistent AI chat overlay on every Backstage page.
+- **Page context awareness** — automatically shares the current page title, path, and URL with the agent.
+- **Streaming responses** — real-time SSE streaming from the LibreChat Agents API.
+- **Markdown rendering** — full GitHub Flavored Markdown (code blocks, tables, lists).
+- **In-chat settings** — users can supply their own API key, validate it, and override the default.
+
+## Prerequisites
+
+- A Backstage app using the **[new frontend system](https://backstage.io/docs/frontend-system/)** (`@backstage/frontend-defaults`).
+- The backend plugin [`@nospt/backstage-plugin-librechat-backend`](../librechat-backend/README.md) installed and configured.
+- A running [LibreChat](https://www.librechat.ai/) instance with the Agents API enabled.
+
+## Installation
+
+Install the package in your Backstage app package (e.g. `packages/app`):
+
+```bash
+yarn --cwd packages/app add @nospt/backstage-plugin-librechat
+```
+
+## Setup
+
+Register the plugin as a feature in your app entry point. With the new frontend system it is discovered automatically when listed in `package.json`, but you can also add it explicitly:
+
+```typescript
+// packages/app/src/App.tsx
+import {createApp} from "@backstage/frontend-defaults";
+import libreChatPlugin from "@nospt/backstage-plugin-librechat";
+
+const app = createApp({
+  features: [libreChatPlugin],
+});
+
+export default app.createRoot();
+```
+
+The plugin contributes an app-root overlay (the chat bubble), so there is no route or page to mount — once registered, the bubble appears in the bottom-right corner of every page.
+
+## Configuration
+
+All configuration for both the frontend and backend plugins lives under the `librechat` key in `app-config.yaml`:
+
+```yaml
+librechat:
+  # Required: URL of your LibreChat instance (used by frontend and backend)
+  baseUrl: https://your-librechat-instance.com
+  # Required: agent ID configured in LibreChat (used as the completion model)
+  agentId: agent_abc123
+  # Optional: default API key — users can override it in the chat Settings
+  apiKey: your-librechat-api-key
+  # Optional: display name shown in the chat header and message labels (default: "AI")
+  name: NOS-GPT
+  # Optional: show/hide the chat bubble (default: true)
+  enabled: true
+```
+
+| Setting   | Required | Visibility | Description                                                         |
+| --------- | -------- | ---------- | ------------------------------------------------------------------- |
+| `baseUrl` | ✅       | frontend   | URL of your LibreChat instance                                      |
+| `agentId` | ✅       | backend    | Agent ID configured in LibreChat, used as the completion model      |
+| `apiKey`  | ❌       | secret     | Default API key; users can override it per-request from the chat UI |
+| `name`    | ❌       | frontend   | Display name in the chat header and messages (default: `AI`)        |
+| `enabled` | ❌       | frontend   | Show or hide the chat bubble (default: `true`)                      |
+
+> [!NOTE]
+> `agentId` and `apiKey` are only read server-side by the backend plugin and are never exposed to the browser. `baseUrl`, `name`, and `enabled` are visible to the frontend.
+
+## Endpoints
+
+The backend plugin mounts under `/api/librechat`:
+
+| Method | Path     | Description                                                               |
+| ------ | -------- | ------------------------------------------------------------------------- |
+| `POST` | `/chat`  | Proxies a chat completion to LibreChat and streams the SSE response back. |
+| `POST` | `/check` | Validates an API key by sending a short test message to LibreChat.        |
+
+Both accept optional `x-librechat-api-key` and `x-librechat-agent-id` headers to override the configured defaults.
+
+## How it works
+
+```
+Frontend bubble → POST /api/librechat/chat → LibreChat /api/agents/v1/chat/completions → SSE stream back
+```
+
+The backend resolves the API key (a user-supplied header takes precedence over the configured default), validates the request, sanitizes the agent ID, and proxies it to `POST {baseUrl}/api/agents/v1/chat/completions`. The streamed response is piped back to the frontend untouched, where it is rendered as Markdown in real time.
+
+## Usage
+
+1. Open any page in Backstage.
+2. Click the **chat bubble** in the bottom-right corner.
+3. Open **Settings** to enter your LibreChat API key (or use the default configured by your admin).
+4. Click the **check** button to validate your key — a confirmation message appears in the chat.
+5. Start chatting — the AI automatically receives context about the page you're viewing.
+
+User settings (the API key) are stored in the browser via Backstage's Storage API.
+
+## License
+
+Apache-2.0. Made with ❤️ by [NOS Inovação](https://github.com/nosportugal).

package/dist/api.esm.js

@@ -0,0 +1,90 @@
+import { createApiRef } from '@backstage/frontend-plugin-api';
+
+const libreChatApiRef = createApiRef({
+  id: "plugin.librechat.api"
+});
+class DefaultLibreChatApi {
+  constructor(options) {
+    this.fetchApi = options.fetchApi;
+    this.configApi = options.configApi;
+  }
+  get backendBaseUrl() {
+    return this.configApi.getString("backend.baseUrl").replace(/\/+$/, "");
+  }
+  async checkApiKey(apiKey) {
+    const response = await this.fetchApi.fetch(
+      `${this.backendBaseUrl}/api/librechat/check`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...apiKey ? { "x-librechat-api-key": apiKey } : {}
+        }
+      }
+    );
+    if (!response.ok) {
+      const data2 = await response.json().catch(() => ({}));
+      throw new Error(
+        data2.error ?? `Backend returned ${response.status}`
+      );
+    }
+    const data = await response.json();
+    return data.reply;
+  }
+  async *sendMessage(messages, options) {
+    const response = await this.fetchApi.fetch(
+      `${this.backendBaseUrl}/api/librechat/chat`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...options?.apiKey ? { "x-librechat-api-key": options.apiKey } : {}
+        },
+        body: JSON.stringify({ messages })
+      }
+    );
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => ({}));
+      throw new Error(
+        errorBody.error ?? `Backend returned ${response.status}`
+      );
+    }
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error("No response stream available");
+    }
+    const decoder = new TextDecoder();
+    let buffer = "";
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (trimmed === "data: [DONE]") {
+            return;
+          }
+          if (trimmed.startsWith("data: ")) {
+            const jsonStr = trimmed.slice(6);
+            try {
+              const parsed = JSON.parse(jsonStr);
+              const content = parsed?.choices?.[0]?.delta?.content;
+              if (typeof content === "string" && content.length > 0) {
+                yield content;
+              }
+            } catch {
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }
+}
+
+export { DefaultLibreChatApi, libreChatApiRef };
+//# sourceMappingURL=api.esm.js.map

package/dist/api.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.esm.js","sources":["../src/api.ts"],"sourcesContent":["import {\n  createApiRef,\n  FetchApi,\n  ConfigApi,\n} from \"@backstage/frontend-plugin-api\";\n\n/** A single chat message. */\nexport interface ChatMessage {\n  role: \"user\" | \"assistant\" | \"system\";\n  content: string;\n}\n\n/**\n * API for communicating with LibreChat through the backend proxy.\n *\n * @public\n */\nexport interface LibreChatApi {\n  /**\n   * Sends messages to LibreChat and yields streamed content chunks.\n   *\n   * @param messages - Conversation history\n   * @param options - Optional override for apiKey\n   * @returns An async generator yielding content strings as they arrive\n   */\n  sendMessage(\n    messages: ChatMessage[],\n    options?: {apiKey?: string},\n  ): AsyncGenerator<string, void, unknown>;\n\n  /**\n   * Checks that the given API key is valid by sending a short test message.\n   *\n   * @param apiKey - API key to validate\n   * @returns The assistant's reply\n   */\n  checkApiKey(apiKey: string): Promise<string>;\n}\n\n/**\n * API reference for the LibreChat API.\n *\n * @public\n */\nexport const libreChatApiRef = createApiRef<LibreChatApi>({\n  id: \"plugin.librechat.api\",\n});\n\n/**\n * Default implementation of the LibreChat API.\n * Calls the backend proxy and parses the SSE stream.\n *\n * @internal\n */\nexport class DefaultLibreChatApi implements LibreChatApi {\n  private readonly fetchApi: FetchApi;\n  private readonly configApi: ConfigApi;\n\n  constructor(options: {fetchApi: FetchApi; configApi: ConfigApi}) {\n    this.fetchApi = options.fetchApi;\n    this.configApi = options.configApi;\n  }\n\n  private get backendBaseUrl(): string {\n    return this.configApi.getString(\"backend.baseUrl\").replace(/\\/+$/, \"\");\n  }\n\n  async checkApiKey(apiKey: string): Promise<string> {\n    const response = await this.fetchApi.fetch(\n      `${this.backendBaseUrl}/api/librechat/check`,\n      {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          ...(apiKey ? {\"x-librechat-api-key\": apiKey} : {}),\n        },\n      },\n    );\n\n    if (!response.ok) {\n      const data = await response.json().catch(() => ({}));\n      throw new Error(\n        (data as {error?: string}).error ??\n          `Backend returned ${response.status}`,\n      );\n    }\n\n    const data = (await response.json()) as {ok: boolean; reply: string};\n    return data.reply;\n  }\n\n  async *sendMessage(\n    messages: ChatMessage[],\n    options?: {apiKey?: string},\n  ): AsyncGenerator<string, void, unknown> {\n    const response = await this.fetchApi.fetch(\n      `${this.backendBaseUrl}/api/librechat/chat`,\n      {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n          ...(options?.apiKey ? {\"x-librechat-api-key\": options.apiKey} : {}),\n        },\n        body: JSON.stringify({messages}),\n      },\n    );\n\n    if (!response.ok) {\n      const errorBody = await response.json().catch(() => ({}));\n      throw new Error(\n        (errorBody as {error?: string}).error ??\n          `Backend returned ${response.status}`,\n      );\n    }\n\n    const reader = response.body?.getReader();\n    if (!reader) {\n      throw new Error(\"No response stream available\");\n    }\n\n    const decoder = new TextDecoder();\n    let buffer = \"\";\n\n    try {\n      while (true) {\n        const {done, value} = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, {stream: true});\n\n        const lines = buffer.split(\"\\n\");\n        buffer = lines.pop() ?? \"\";\n\n        for (const line of lines) {\n          const trimmed = line.trim();\n\n          if (trimmed === \"data: [DONE]\") {\n            return;\n          }\n\n          if (trimmed.startsWith(\"data: \")) {\n            const jsonStr = trimmed.slice(6);\n            try {\n              const parsed = JSON.parse(jsonStr);\n              const content = parsed?.choices?.[0]?.delta?.content;\n              if (typeof content === \"string\" && content.length > 0) {\n                yield content;\n              }\n            } catch {\n              // Skip malformed JSON lines\n            }\n          }\n        }\n      }\n    } finally {\n      reader.releaseLock();\n    }\n  }\n}\n"],"names":["data"],"mappings":"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"}

package/dist/components/ChatBubble.esm.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Fab from '@material-ui/core/Fab';
+import Paper from '@material-ui/core/Paper';
+import Slide from '@material-ui/core/Slide';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import ChatIcon from '@material-ui/icons/Chat';
+import CloseIcon from '@material-ui/icons/Close';
+import { useApi, configApiRef } from '@backstage/frontend-plugin-api';
+import { ChatPanel } from './ChatPanel.esm.js';
+
+const CHAT_WIDTH = 400;
+const CHAT_HEIGHT = 560;
+const useStyles = makeStyles((theme) => ({
+  container: {
+    position: "fixed",
+    bottom: theme.spacing(3),
+    right: theme.spacing(3),
+    zIndex: theme.zIndex.tooltip + 1
+  },
+  fab: {
+    boxShadow: theme.shadows[6]
+  },
+  panel: {
+    position: "fixed",
+    bottom: theme.spacing(3) + 56 + 12,
+    // fab height + gap
+    right: theme.spacing(3),
+    width: CHAT_WIDTH,
+    height: CHAT_HEIGHT,
+    maxHeight: "calc(100vh - 120px)",
+    borderRadius: 12,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    zIndex: theme.zIndex.tooltip + 1,
+    boxShadow: theme.shadows[16]
+  }
+}));
+function useIsEnabled() {
+  const configApi = useApi(configApiRef);
+  return configApi.getOptionalBoolean("librechat.enabled") ?? true;
+}
+function ChatBubble() {
+  const classes = useStyles();
+  const enabled = useIsEnabled();
+  const [open, setOpen] = useState(false);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => {
+  }, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Slide, { direction: "up", in: open, mountOnEnter: true, unmountOnExit: true, children: /* @__PURE__ */ jsx(Paper, { className: classes.panel, elevation: 16, children: /* @__PURE__ */ jsx(ChatPanel, {}) }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(
+      Fab,
+      {
+        color: "primary",
+        className: classes.fab,
+        onClick: () => setOpen((prev) => !prev),
+        "aria-label": open ? "Close chat" : "Open chat",
+        children: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {})
+      }
+    ) })
+  ] }) });
+}
+
+export { ChatBubble };
+//# sourceMappingURL=ChatBubble.esm.js.map

package/dist/components/ChatBubble.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.esm.js","sources":["../../src/components/ChatBubble.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {makeStyles, Theme} from \"@material-ui/core/styles\";\nimport Fab from \"@material-ui/core/Fab\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Slide from \"@material-ui/core/Slide\";\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\nimport ChatIcon from \"@material-ui/icons/Chat\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport {useApi, configApiRef} from \"@backstage/frontend-plugin-api\";\nimport {ChatPanel} from \"./ChatPanel\";\n\nconst CHAT_WIDTH = 400;\nconst CHAT_HEIGHT = 560;\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  container: {\n    position: \"fixed\",\n    bottom: theme.spacing(3),\n    right: theme.spacing(3),\n    zIndex: theme.zIndex.tooltip + 1,\n  },\n  fab: {\n    boxShadow: theme.shadows[6],\n  },\n  panel: {\n    position: \"fixed\",\n    bottom: theme.spacing(3) + 56 + 12, // fab height + gap\n    right: theme.spacing(3),\n    width: CHAT_WIDTH,\n    height: CHAT_HEIGHT,\n    maxHeight: \"calc(100vh - 120px)\",\n    borderRadius: 12,\n    overflow: \"hidden\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    zIndex: theme.zIndex.tooltip + 1,\n    boxShadow: theme.shadows[16],\n  },\n}));\n\nfunction useIsEnabled(): boolean {\n  const configApi = useApi(configApiRef);\n  return configApi.getOptionalBoolean(\"librechat.enabled\") ?? true;\n}\n\nexport function ChatBubble() {\n  const classes = useStyles();\n  const enabled = useIsEnabled();\n  const [open, setOpen] = useState(false);\n\n  if (!enabled) {\n    return null;\n  }\n\n  return (\n    <ClickAwayListener onClickAway={() => {}}>\n      <div>\n        <Slide direction=\"up\" in={open} mountOnEnter unmountOnExit>\n          <Paper className={classes.panel} elevation={16}>\n            <ChatPanel />\n          </Paper>\n        </Slide>\n\n        <div className={classes.container}>\n          <Fab\n            color=\"primary\"\n            className={classes.fab}\n            onClick={() => setOpen((prev) => !prev)}\n            aria-label={open ? \"Close chat\" : \"Open chat\"}\n          >\n            {open ? <CloseIcon /> : <ChatIcon />}\n          </Fab>\n        </div>\n      </div>\n    </ClickAwayListener>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,MAAM,UAAA,GAAa,GAAA;AACnB,MAAM,WAAA,GAAc,GAAA;AAEpB,MAAM,SAAA,GAAY,UAAA,CAAW,CAAC,KAAA,MAAkB;AAAA,EAC9C,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,OAAA;AAAA,IACV,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACvB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACtB,MAAA,EAAQ,KAAA,CAAM,MAAA,CAAO,OAAA,GAAU;AAAA,GACjC;AAAA,EACA,GAAA,EAAK;AAAA,IACH,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC5B;AAAA,EACA,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,OAAA;AAAA,IACV,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAI,EAAA,GAAK,EAAA;AAAA;AAAA,IAChC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACtB,KAAA,EAAO,UAAA;AAAA,IACP,MAAA,EAAQ,WAAA;AAAA,IACR,SAAA,EAAW,qBAAA;AAAA,IACX,YAAA,EAAc,EAAA;AAAA,IACd,QAAA,EAAU,QAAA;AAAA,IACV,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,MAAA,EAAQ,KAAA,CAAM,MAAA,CAAO,OAAA,GAAU,CAAA;AAAA,IAC/B,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,EAAE;AAAA;AAE/B,CAAA,CAAE,CAAA;AAEF,SAAS,YAAA,GAAwB;AAC/B,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,OAAO,SAAA,CAAU,kBAAA,CAAmB,mBAAmB,CAAA,IAAK,IAAA;AAC9D;AAEO,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,UAAU,YAAA,EAAa;AAC7B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,iBAAA,EAAA,EAAkB,WAAA,EAAa,MAAM;AAAA,EAAC,CAAA,EACrC,+BAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,SAAA,EAAU,IAAA,EAAK,IAAI,IAAA,EAAM,YAAA,EAAY,MAAC,aAAA,EAAa,IAAA,EACxD,8BAAC,KAAA,EAAA,EAAM,SAAA,EAAW,QAAQ,KAAA,EAAO,SAAA,EAAW,IAC1C,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,GACb,CAAA,EACF,CAAA;AAAA,oBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,SAAA;AAAA,QACN,WAAW,OAAA,CAAQ,GAAA;AAAA,QACnB,SAAS,MAAM,OAAA,CAAQ,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,QACtC,YAAA,EAAY,OAAO,YAAA,GAAe,WAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,mBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,uBAAM,QAAA,EAAA,EAAS;AAAA;AAAA,KACpC,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/ChatMessage.esm.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: theme.spacing(1.5)
+  },
+  userRow: {
+    alignItems: "flex-end"
+  },
+  assistantRow: {
+    alignItems: "flex-start"
+  },
+  label: {
+    fontSize: "0.7rem",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    color: theme.palette.text.secondary,
+    marginBottom: 2,
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5)
+  },
+  bubble: {
+    maxWidth: "85%",
+    padding: theme.spacing(1, 1.5),
+    borderRadius: 12,
+    wordBreak: "break-word",
+    "& p": {
+      margin: 0
+    },
+    "& p + p": {
+      marginTop: theme.spacing(1)
+    },
+    "& pre": {
+      background: theme.palette.type === "dark" ? "#1e1e1e" : "#f5f5f5",
+      borderRadius: 6,
+      padding: theme.spacing(1),
+      overflowX: "auto",
+      fontSize: "0.85em"
+    },
+    "& code": {
+      fontSize: "0.85em",
+      fontFamily: '"Roboto Mono", monospace'
+    },
+    "& ul, & ol": {
+      marginTop: theme.spacing(0.5),
+      marginBottom: theme.spacing(0.5),
+      paddingLeft: theme.spacing(2.5)
+    },
+    "& a": {
+      color: theme.palette.primary.main
+    },
+    "& table": {
+      borderCollapse: "collapse",
+      "& th, & td": {
+        border: `1px solid ${theme.palette.divider}`,
+        padding: theme.spacing(0.5, 1)
+      }
+    }
+  },
+  userBubble: {
+    background: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    borderBottomRightRadius: 4
+  },
+  assistantBubble: {
+    background: theme.palette.type === "dark" ? "#2d2d2d" : "#f0f0f0",
+    color: theme.palette.text.primary,
+    borderBottomLeftRadius: 4
+  },
+  "@keyframes typingBounce": {
+    "0%, 80%, 100%": { transform: "translateY(0)", opacity: 0.35 },
+    "40%": { transform: "translateY(-4px)", opacity: 1 }
+  },
+  typing: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    padding: theme.spacing(0.5, 0)
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    background: theme.palette.text.secondary,
+    animation: "$typingBounce 1.2s infinite ease-in-out both"
+  },
+  dot2: {
+    animationDelay: "0.2s"
+  },
+  dot3: {
+    animationDelay: "0.4s"
+  }
+}));
+function ChatMessage({
+  message,
+  agentName = "AI",
+  loading = false
+}) {
+  const classes = useStyles();
+  const isUser = message.role === "user";
+  const showTyping = !isUser && loading && !message.content;
+  let bubbleContent;
+  if (isUser) {
+    bubbleContent = /* @__PURE__ */ jsx(Typography, { variant: "body2", children: message.content });
+  } else if (showTyping) {
+    bubbleContent = /* @__PURE__ */ jsxs("div", { className: classes.typing, "aria-label": `${agentName} is typing`, children: [
+      /* @__PURE__ */ jsx("span", { className: classes.dot }),
+      /* @__PURE__ */ jsx("span", { className: `${classes.dot} ${classes.dot2}` }),
+      /* @__PURE__ */ jsx("span", { className: `${classes.dot} ${classes.dot3}` })
+    ] });
+  } else {
+    bubbleContent = /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${classes.root} ${isUser ? classes.userRow : classes.assistantRow}`,
+      children: [
+        /* @__PURE__ */ jsx(Typography, { className: classes.label, children: isUser ? "You" : agentName }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${classes.bubble} ${isUser ? classes.userBubble : classes.assistantBubble}`,
+            children: bubbleContent
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ChatMessage };
+//# sourceMappingURL=ChatMessage.esm.js.map

package/dist/components/ChatMessage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.esm.js","sources":["../../src/components/ChatMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport {makeStyles, Theme} from \"@material-ui/core/styles\";\nimport Typography from \"@material-ui/core/Typography\";\nimport type {ChatMessage as ChatMessageType} from \"../api\";\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    marginBottom: theme.spacing(1.5),\n  },\n  userRow: {\n    alignItems: \"flex-end\",\n  },\n  assistantRow: {\n    alignItems: \"flex-start\",\n  },\n  label: {\n    fontSize: \"0.7rem\",\n    fontWeight: 600,\n    textTransform: \"uppercase\",\n    color: theme.palette.text.secondary,\n    marginBottom: 2,\n    paddingLeft: theme.spacing(0.5),\n    paddingRight: theme.spacing(0.5),\n  },\n  bubble: {\n    maxWidth: \"85%\",\n    padding: theme.spacing(1, 1.5),\n    borderRadius: 12,\n    wordBreak: \"break-word\",\n    \"& p\": {\n      margin: 0,\n    },\n    \"& p + p\": {\n      marginTop: theme.spacing(1),\n    },\n    \"& pre\": {\n      background: theme.palette.type === \"dark\" ? \"#1e1e1e\" : \"#f5f5f5\",\n      borderRadius: 6,\n      padding: theme.spacing(1),\n      overflowX: \"auto\",\n      fontSize: \"0.85em\",\n    },\n    \"& code\": {\n      fontSize: \"0.85em\",\n      fontFamily: '\"Roboto Mono\", monospace',\n    },\n    \"& ul, & ol\": {\n      marginTop: theme.spacing(0.5),\n      marginBottom: theme.spacing(0.5),\n      paddingLeft: theme.spacing(2.5),\n    },\n    \"& a\": {\n      color: theme.palette.primary.main,\n    },\n    \"& table\": {\n      borderCollapse: \"collapse\",\n      \"& th, & td\": {\n        border: `1px solid ${theme.palette.divider}`,\n        padding: theme.spacing(0.5, 1),\n      },\n    },\n  },\n  userBubble: {\n    background: theme.palette.primary.main,\n    color: theme.palette.primary.contrastText,\n    borderBottomRightRadius: 4,\n  },\n  assistantBubble: {\n    background: theme.palette.type === \"dark\" ? \"#2d2d2d\" : \"#f0f0f0\",\n    color: theme.palette.text.primary,\n    borderBottomLeftRadius: 4,\n  },\n  \"@keyframes typingBounce\": {\n    \"0%, 80%, 100%\": {transform: \"translateY(0)\", opacity: 0.35},\n    \"40%\": {transform: \"translateY(-4px)\", opacity: 1},\n  },\n  typing: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: 4,\n    padding: theme.spacing(0.5, 0),\n  },\n  dot: {\n    width: 6,\n    height: 6,\n    borderRadius: \"50%\",\n    background: theme.palette.text.secondary,\n    animation: \"$typingBounce 1.2s infinite ease-in-out both\",\n  },\n  dot2: {\n    animationDelay: \"0.2s\",\n  },\n  dot3: {\n    animationDelay: \"0.4s\",\n  },\n}));\n\ninterface ChatMessageProps {\n  message: ChatMessageType;\n  agentName?: string;\n  loading?: boolean;\n}\n\nexport function ChatMessage({\n  message,\n  agentName = \"AI\",\n  loading = false,\n}: ChatMessageProps) {\n  const classes = useStyles();\n  const isUser = message.role === \"user\";\n  const showTyping = !isUser && loading && !message.content;\n\n  let bubbleContent: React.ReactNode;\n  if (isUser) {\n    bubbleContent = <Typography variant=\"body2\">{message.content}</Typography>;\n  } else if (showTyping) {\n    bubbleContent = (\n      <div className={classes.typing} aria-label={`${agentName} is typing`}>\n        <span className={classes.dot} />\n        <span className={`${classes.dot} ${classes.dot2}`} />\n        <span className={`${classes.dot} ${classes.dot3}`} />\n      </div>\n    );\n  } else {\n    bubbleContent = (\n      <ReactMarkdown remarkPlugins={[remarkGfm]}>\n        {message.content}\n      </ReactMarkdown>\n    );\n  }\n\n  return (\n    <div\n      className={`${classes.root} ${\n        isUser ? classes.userRow : classes.assistantRow\n      }`}\n    >\n      <Typography className={classes.label}>\n        {isUser ? \"You\" : agentName}\n      </Typography>\n      <div\n        className={`${classes.bubble} ${\n          isUser ? classes.userBubble : classes.assistantBubble\n        }`}\n      >\n        {bubbleContent}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ChatPanel.esm.js

@@ -0,0 +1,288 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { flushSync } from 'react-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import SendIcon from '@material-ui/icons/Send';
+import SettingsIcon from '@material-ui/icons/Settings';
+import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
+import LinkIcon from '@material-ui/icons/Link';
+import { useApi, configApiRef } from '@backstage/frontend-plugin-api';
+import { libreChatApiRef } from '../api.esm.js';
+import { ChatMessage } from './ChatMessage.esm.js';
+import { SettingsTab } from './SettingsTab.esm.js';
+import { useLibreChatSettings } from '../hooks/useLibreChatSettings.esm.js';
+import { usePageContext } from '../hooks/usePageContext.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    background: theme.palette.background.paper
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(1, 2),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    minHeight: 48
+  },
+  headerTitle: {
+    fontWeight: 600,
+    fontSize: "0.95rem"
+  },
+  headerActions: {
+    display: "flex",
+    gap: theme.spacing(0.5)
+  },
+  messages: {
+    flex: 1,
+    overflowY: "auto",
+    padding: theme.spacing(2),
+    display: "flex",
+    flexDirection: "column"
+  },
+  emptyState: {
+    display: "flex",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.palette.text.secondary,
+    textAlign: "center",
+    padding: theme.spacing(3)
+  },
+  inputArea: {
+    display: "flex",
+    alignItems: "flex-end",
+    padding: theme.spacing(1, 2, 2),
+    gap: theme.spacing(1),
+    borderTop: `1px solid ${theme.palette.divider}`
+  },
+  textField: {
+    flex: 1
+  },
+  error: {
+    margin: theme.spacing(1, 2),
+    padding: theme.spacing(1),
+    background: theme.palette.error.light,
+    color: theme.palette.error.contrastText,
+    borderRadius: 6,
+    fontSize: "0.85rem"
+  },
+  contextBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(0.5, 2),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.type === "dark" ? "#1a1a2e" : "#f5f7ff",
+    fontSize: "0.75rem",
+    color: theme.palette.text.secondary,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
+  },
+  contextIcon: {
+    fontSize: 14,
+    opacity: 0.6
+  }
+}));
+function ChatPanel() {
+  const classes = useStyles();
+  const libreChatApi = useApi(libreChatApiRef);
+  const configApi = useApi(configApiRef);
+  const { settings } = useLibreChatSettings();
+  const pageContext = usePageContext();
+  const agentName = configApi.getOptionalString("librechat.name") ?? "AI";
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const messagesEndRef = useRef(null);
+  const abortRef = useRef(false);
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+  const handleSend = useCallback(async () => {
+    const trimmed = input.trim();
+    if (!trimmed || isStreaming) return;
+    setError(null);
+    const userMessage = { role: "user", content: trimmed };
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+    setInput("");
+    setIsStreaming(true);
+    abortRef.current = false;
+    const assistantMessage = {
+      role: "assistant",
+      content: ""
+    };
+    setMessages([...updatedMessages, assistantMessage]);
+    try {
+      const contextSuffix = [
+        "",
+        "[Page context]",
+        `Title: ${pageContext.title}`,
+        `Path: ${pageContext.path}`,
+        `URL: ${pageContext.url}`
+      ].join("\n");
+      const messagesWithContext = updatedMessages.map(
+        (msg, idx) => idx === updatedMessages.length - 1 && msg.role === "user" ? { ...msg, content: `${msg.content}
+${contextSuffix}` } : msg
+      );
+      const stream = libreChatApi.sendMessage(messagesWithContext, {
+        apiKey: settings.apiKey || void 0
+      });
+      let accumulated = "";
+      for await (const chunk of stream) {
+        if (abortRef.current) break;
+        accumulated += chunk;
+        const content = accumulated;
+        await new Promise((resolve) => {
+          flushSync(() => {
+            setMessages((prev) => {
+              const updated = [...prev];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content
+              };
+              return updated;
+            });
+          });
+          requestAnimationFrame(() => resolve());
+        });
+      }
+      if (!accumulated) {
+        setMessages(updatedMessages);
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      setError(msg);
+      setMessages(updatedMessages);
+    } finally {
+      setIsStreaming(false);
+    }
+  }, [input, isStreaming, messages, libreChatApi, settings, pageContext]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleClear = useCallback(() => {
+    setMessages([]);
+    setError(null);
+    abortRef.current = true;
+  }, []);
+  const handleCheckResult = useCallback(
+    (reply, checkError) => {
+      if (checkError) {
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: "assistant",
+            content: `\u26A0\uFE0F API key check failed: ${checkError}`
+          }
+        ]);
+      } else {
+        setMessages((prev) => [
+          ...prev,
+          { role: "assistant", content: `\u2705 API key is valid!
+
+${reply}` }
+        ]);
+      }
+      setShowSettings(false);
+    },
+    []
+  );
+  if (showSettings) {
+    return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx(
+      SettingsTab,
+      {
+        onBack: () => setShowSettings(false),
+        onCheckResult: handleCheckResult
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+      /* @__PURE__ */ jsxs(Typography, { className: classes.headerTitle, children: [
+        agentName,
+        " Chat"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: classes.headerActions, children: [
+        /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClear, title: "Clear chat", children: /* @__PURE__ */ jsx(DeleteSweepIcon, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => setShowSettings(true),
+            title: "Settings",
+            children: /* @__PURE__ */ jsx(SettingsIcon, { fontSize: "small" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: classes.contextBar, title: pageContext.url, children: [
+      /* @__PURE__ */ jsx(LinkIcon, { className: classes.contextIcon }),
+      /* @__PURE__ */ jsx("span", { children: pageContext.title || pageContext.path })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: classes.messages, children: [
+      messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: classes.emptyState, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Send a message to start chatting with AI" }) }) : messages.map((msg, idx) => /* @__PURE__ */ jsx(
+        ChatMessage,
+        {
+          message: msg,
+          agentName,
+          loading: isStreaming && idx === messages.length - 1 && msg.role === "assistant"
+        },
+        idx
+      )),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: classes.error, children: error }),
+    /* @__PURE__ */ jsxs("div", { className: classes.inputArea, children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          className: classes.textField,
+          variant: "outlined",
+          size: "small",
+          placeholder: "Type a message...",
+          multiline: true,
+          maxRows: 4,
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: handleKeyDown,
+          disabled: isStreaming,
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          color: "primary",
+          onClick: handleSend,
+          disabled: isStreaming || !input.trim(),
+          title: "Send message",
+          children: isStreaming ? /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) : /* @__PURE__ */ jsx(SendIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ChatPanel };
+//# sourceMappingURL=ChatPanel.esm.js.map

package/dist/components/ChatPanel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPanel.esm.js","sources":["../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, {useState, useRef, useEffect, useCallback} from \"react\";\nimport {flushSync} from \"react-dom\";\nimport {makeStyles, Theme} from \"@material-ui/core/styles\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Typography from \"@material-ui/core/Typography\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport SendIcon from \"@material-ui/icons/Send\";\nimport SettingsIcon from \"@material-ui/icons/Settings\";\nimport DeleteSweepIcon from \"@material-ui/icons/DeleteSweep\";\nimport LinkIcon from \"@material-ui/icons/Link\";\nimport {useApi, configApiRef} from \"@backstage/frontend-plugin-api\";\nimport {libreChatApiRef, ChatMessage as ChatMessageType} from \"../api\";\nimport {ChatMessage} from \"./ChatMessage\";\nimport {SettingsTab} from \"./SettingsTab\";\nimport {useLibreChatSettings} from \"../hooks/useLibreChatSettings\";\nimport {usePageContext} from \"../hooks/usePageContext\";\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n    background: theme.palette.background.paper,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    padding: theme.spacing(1, 2),\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    minHeight: 48,\n  },\n  headerTitle: {\n    fontWeight: 600,\n    fontSize: \"0.95rem\",\n  },\n  headerActions: {\n    display: \"flex\",\n    gap: theme.spacing(0.5),\n  },\n  messages: {\n    flex: 1,\n    overflowY: \"auto\",\n    padding: theme.spacing(2),\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  emptyState: {\n    display: \"flex\",\n    flex: 1,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    color: theme.palette.text.secondary,\n    textAlign: \"center\",\n    padding: theme.spacing(3),\n  },\n  inputArea: {\n    display: \"flex\",\n    alignItems: \"flex-end\",\n    padding: theme.spacing(1, 2, 2),\n    gap: theme.spacing(1),\n    borderTop: `1px solid ${theme.palette.divider}`,\n  },\n  textField: {\n    flex: 1,\n  },\n  error: {\n    margin: theme.spacing(1, 2),\n    padding: theme.spacing(1),\n    background: theme.palette.error.light,\n    color: theme.palette.error.contrastText,\n    borderRadius: 6,\n    fontSize: \"0.85rem\",\n  },\n  contextBar: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(0.5, 2),\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    background: theme.palette.type === \"dark\" ? \"#1a1a2e\" : \"#f5f7ff\",\n    fontSize: \"0.75rem\",\n    color: theme.palette.text.secondary,\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\" as const,\n    textOverflow: \"ellipsis\",\n  },\n  contextIcon: {\n    fontSize: 14,\n    opacity: 0.6,\n  },\n}));\n\nexport function ChatPanel() {\n  const classes = useStyles();\n  const libreChatApi = useApi(libreChatApiRef);\n  const configApi = useApi(configApiRef);\n  const {settings} = useLibreChatSettings();\n  const pageContext = usePageContext();\n  const agentName = configApi.getOptionalString(\"librechat.name\") ?? \"AI\";\n\n  const [messages, setMessages] = useState<ChatMessageType[]>([]);\n  const [input, setInput] = useState(\"\");\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [showSettings, setShowSettings] = useState(false);\n\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const abortRef = useRef(false);\n\n  const scrollToBottom = useCallback(() => {\n    messagesEndRef.current?.scrollIntoView({behavior: \"smooth\"});\n  }, []);\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, scrollToBottom]);\n\n  const handleSend = useCallback(async () => {\n    const trimmed = input.trim();\n    if (!trimmed || isStreaming) return;\n\n    setError(null);\n    const userMessage: ChatMessageType = {role: \"user\", content: trimmed};\n    const updatedMessages = [...messages, userMessage];\n    setMessages(updatedMessages);\n    setInput(\"\");\n    setIsStreaming(true);\n    abortRef.current = false;\n\n    // Add placeholder for assistant response\n    const assistantMessage: ChatMessageType = {\n      role: \"assistant\",\n      content: \"\",\n    };\n    setMessages([...updatedMessages, assistantMessage]);\n\n    try {\n      // Inject page context into the latest user message\n      const contextSuffix = [\n        \"\",\n        \"[Page context]\",\n        `Title: ${pageContext.title}`,\n        `Path: ${pageContext.path}`,\n        `URL: ${pageContext.url}`,\n      ].join(\"\\n\");\n\n      const messagesWithContext = updatedMessages.map((msg, idx) =>\n        idx === updatedMessages.length - 1 && msg.role === \"user\"\n          ? {...msg, content: `${msg.content}\\n${contextSuffix}`}\n          : msg,\n      );\n\n      const stream = libreChatApi.sendMessage(messagesWithContext, {\n        apiKey: settings.apiKey || undefined,\n      });\n\n      let accumulated = \"\";\n      for await (const chunk of stream) {\n        if (abortRef.current) break;\n        accumulated += chunk;\n        const content = accumulated;\n        // Force synchronous render + wait for browser paint\n        await new Promise<void>((resolve) => {\n          flushSync(() => {\n            setMessages((prev) => {\n              const updated = [...prev];\n              updated[updated.length - 1] = {\n                role: \"assistant\",\n                content,\n              };\n              return updated;\n            });\n          });\n          requestAnimationFrame(() => resolve());\n        });\n      }\n\n      // If accumulated is empty, remove the empty assistant message\n      if (!accumulated) {\n        setMessages(updatedMessages);\n      }\n    } catch (err: unknown) {\n      const msg = err instanceof Error ? err.message : \"Unknown error\";\n      setError(msg);\n      // Remove the empty assistant placeholder on error\n      setMessages(updatedMessages);\n    } finally {\n      setIsStreaming(false);\n    }\n  }, [input, isStreaming, messages, libreChatApi, settings, pageContext]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend],\n  );\n\n  const handleClear = useCallback(() => {\n    setMessages([]);\n    setError(null);\n    abortRef.current = true;\n  }, []);\n\n  const handleCheckResult = useCallback(\n    (reply: string, checkError?: string) => {\n      if (checkError) {\n        setMessages((prev) => [\n          ...prev,\n          {\n            role: \"assistant\",\n            content: `⚠️ API key check failed: ${checkError}`,\n          },\n        ]);\n      } else {\n        setMessages((prev) => [\n          ...prev,\n          {role: \"assistant\", content: `✅ API key is valid!\\n\\n${reply}`},\n        ]);\n      }\n      setShowSettings(false);\n    },\n    [],\n  );\n\n  if (showSettings) {\n    return (\n      <div className={classes.root}>\n        <SettingsTab\n          onBack={() => setShowSettings(false)}\n          onCheckResult={handleCheckResult}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.header}>\n        <Typography className={classes.headerTitle}>\n          {agentName} Chat\n        </Typography>\n        <div className={classes.headerActions}>\n          <IconButton size=\"small\" onClick={handleClear} title=\"Clear chat\">\n            <DeleteSweepIcon fontSize=\"small\" />\n          </IconButton>\n          <IconButton\n            size=\"small\"\n            onClick={() => setShowSettings(true)}\n            title=\"Settings\"\n          >\n            <SettingsIcon fontSize=\"small\" />\n          </IconButton>\n        </div>\n      </div>\n\n      <div className={classes.contextBar} title={pageContext.url}>\n        <LinkIcon className={classes.contextIcon} />\n        <span>{pageContext.title || pageContext.path}</span>\n      </div>\n\n      <div className={classes.messages}>\n        {messages.length === 0 ? (\n          <div className={classes.emptyState}>\n            <Typography variant=\"body2\" color=\"textSecondary\">\n              Send a message to start chatting with AI\n            </Typography>\n          </div>\n        ) : (\n          messages.map((msg, idx) => (\n            <ChatMessage\n              key={idx}\n              message={msg}\n              agentName={agentName}\n              loading={\n                isStreaming &&\n                idx === messages.length - 1 &&\n                msg.role === \"assistant\"\n              }\n            />\n          ))\n        )}\n        <div ref={messagesEndRef} />\n      </div>\n\n      {error && <div className={classes.error}>{error}</div>}\n\n      <div className={classes.inputArea}>\n        <TextField\n          className={classes.textField}\n          variant=\"outlined\"\n          size=\"small\"\n          placeholder=\"Type a message...\"\n          multiline\n          maxRows={4}\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={handleKeyDown}\n          disabled={isStreaming}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus\n        />\n        <IconButton\n          color=\"primary\"\n          onClick={handleSend}\n          disabled={isStreaming || !input.trim()}\n          title=\"Send message\"\n        >\n          {isStreaming ? <CircularProgress size={24} /> : <SendIcon />}\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SettingsTab.esm.js

@@ -0,0 +1,161 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import CheckIcon from '@material-ui/icons/Check';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { libreChatApiRef } from '../api.esm.js';
+import { useLibreChatSettings } from '../hooks/useLibreChatSettings.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(1, 2),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    gap: theme.spacing(1),
+    minHeight: 48
+  },
+  headerTitle: {
+    fontWeight: 600,
+    fontSize: "0.95rem"
+  },
+  content: {
+    flex: 1,
+    padding: theme.spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+    overflow: "auto"
+  },
+  description: {
+    fontSize: "0.85rem",
+    color: theme.palette.text.secondary,
+    marginBottom: theme.spacing(1)
+  },
+  apiKeyRow: {
+    display: "flex",
+    gap: theme.spacing(1),
+    alignItems: "flex-start"
+  },
+  apiKeyField: {
+    flex: 1
+  },
+  testButton: {
+    marginTop: 2,
+    minWidth: 40,
+    width: 40,
+    height: 40,
+    padding: 0
+  },
+  actions: {
+    display: "flex",
+    gap: theme.spacing(1),
+    marginTop: theme.spacing(1)
+  },
+  success: {
+    color: theme.palette.success?.main ?? "#4caf50",
+    fontSize: "0.85rem",
+    marginTop: theme.spacing(1)
+  }
+}));
+function SettingsTab({ onBack, onCheckResult }) {
+  const classes = useStyles();
+  const libreChatApi = useApi(libreChatApiRef);
+  const { settings, saveSettings, clearSettings } = useLibreChatSettings();
+  const [apiKey, setApiKey] = useState(settings.apiKey);
+  const [saved, setSaved] = useState(false);
+  const [testing, setTesting] = useState(false);
+  useEffect(() => {
+    setApiKey(settings.apiKey);
+  }, [settings]);
+  const handleTest = async () => {
+    if (!apiKey.trim()) return;
+    setTesting(true);
+    try {
+      const reply = await libreChatApi.checkApiKey(apiKey.trim());
+      onCheckResult?.(reply);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Connection failed";
+      onCheckResult?.("", message);
+    } finally {
+      setTesting(false);
+    }
+  };
+  const handleSave = async () => {
+    await saveSettings({ apiKey });
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2e3);
+  };
+  const handleClear = async () => {
+    await clearSettings();
+    setApiKey("");
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+      /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onBack, title: "Back to chat", children: /* @__PURE__ */ jsx(ArrowBackIcon, { fontSize: "small" }) }),
+      /* @__PURE__ */ jsx(Typography, { className: classes.headerTitle, children: "Settings" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: classes.content, children: [
+      /* @__PURE__ */ jsx(Typography, { className: classes.description, children: "Enter your LibreChat API key. Leave blank to use the default key set by your Backstage administrator." }),
+      /* @__PURE__ */ jsxs("div", { className: classes.apiKeyRow, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            className: classes.apiKeyField,
+            label: "API Key",
+            variant: "outlined",
+            size: "small",
+            type: "password",
+            value: apiKey,
+            onChange: (e) => setApiKey(e.target.value),
+            placeholder: "Your LibreChat API key",
+            helperText: "Overrides the server-configured API key"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: classes.testButton,
+            variant: "outlined",
+            color: "primary",
+            size: "small",
+            disabled: !apiKey.trim() || testing,
+            onClick: handleTest,
+            title: "Check API key \u2014 sends a test message",
+            children: testing ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : /* @__PURE__ */ jsx(CheckIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            color: "primary",
+            size: "small",
+            onClick: handleSave,
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: handleClear, children: "Clear" })
+      ] }),
+      saved && /* @__PURE__ */ jsx(Typography, { className: classes.success, children: "Settings saved!" })
+    ] })
+  ] });
+}
+
+export { SettingsTab };
+//# sourceMappingURL=SettingsTab.esm.js.map

package/dist/components/SettingsTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsTab.esm.js","sources":["../../src/components/SettingsTab.tsx"],"sourcesContent":["import React, {useState, useEffect} from \"react\";\nimport {makeStyles, Theme} from \"@material-ui/core/styles\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Button from \"@material-ui/core/Button\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Typography from \"@material-ui/core/Typography\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport ArrowBackIcon from \"@material-ui/icons/ArrowBack\";\nimport CheckIcon from \"@material-ui/icons/Check\";\nimport {useApi} from \"@backstage/frontend-plugin-api\";\nimport {libreChatApiRef} from \"../api\";\nimport {useLibreChatSettings} from \"../hooks/useLibreChatSettings\";\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(1, 2),\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    gap: theme.spacing(1),\n    minHeight: 48,\n  },\n  headerTitle: {\n    fontWeight: 600,\n    fontSize: \"0.95rem\",\n  },\n  content: {\n    flex: 1,\n    padding: theme.spacing(2),\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.spacing(2),\n    overflow: \"auto\",\n  },\n  description: {\n    fontSize: \"0.85rem\",\n    color: theme.palette.text.secondary,\n    marginBottom: theme.spacing(1),\n  },\n  apiKeyRow: {\n    display: \"flex\",\n    gap: theme.spacing(1),\n    alignItems: \"flex-start\",\n  },\n  apiKeyField: {\n    flex: 1,\n  },\n  testButton: {\n    marginTop: 2,\n    minWidth: 40,\n    width: 40,\n    height: 40,\n    padding: 0,\n  },\n  actions: {\n    display: \"flex\",\n    gap: theme.spacing(1),\n    marginTop: theme.spacing(1),\n  },\n  success: {\n    color: theme.palette.success?.main ?? \"#4caf50\",\n    fontSize: \"0.85rem\",\n    marginTop: theme.spacing(1),\n  },\n}));\n\ninterface SettingsTabProps {\n  onBack: () => void;\n  onCheckResult?: (reply: string, error?: string) => void;\n}\n\nexport function SettingsTab({onBack, onCheckResult}: SettingsTabProps) {\n  const classes = useStyles();\n  const libreChatApi = useApi(libreChatApiRef);\n  const {settings, saveSettings, clearSettings} = useLibreChatSettings();\n\n  const [apiKey, setApiKey] = useState(settings.apiKey);\n  const [saved, setSaved] = useState(false);\n  const [testing, setTesting] = useState(false);\n\n  useEffect(() => {\n    setApiKey(settings.apiKey);\n  }, [settings]);\n\n  const handleTest = async () => {\n    if (!apiKey.trim()) return;\n\n    setTesting(true);\n    try {\n      const reply = await libreChatApi.checkApiKey(apiKey.trim());\n      onCheckResult?.(reply);\n    } catch (err: unknown) {\n      const message = err instanceof Error ? err.message : \"Connection failed\";\n      onCheckResult?.(\"\", message);\n    } finally {\n      setTesting(false);\n    }\n  };\n\n  const handleSave = async () => {\n    await saveSettings({apiKey});\n    setSaved(true);\n    setTimeout(() => setSaved(false), 2000);\n  };\n\n  const handleClear = async () => {\n    await clearSettings();\n    setApiKey(\"\");\n    setSaved(true);\n    setTimeout(() => setSaved(false), 2000);\n  };\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.header}>\n        <IconButton size=\"small\" onClick={onBack} title=\"Back to chat\">\n          <ArrowBackIcon fontSize=\"small\" />\n        </IconButton>\n        <Typography className={classes.headerTitle}>Settings</Typography>\n      </div>\n\n      <div className={classes.content}>\n        <Typography className={classes.description}>\n          Enter your LibreChat API key. Leave blank to use the default key set\n          by your Backstage administrator.\n        </Typography>\n\n        <div className={classes.apiKeyRow}>\n          <TextField\n            className={classes.apiKeyField}\n            label=\"API Key\"\n            variant=\"outlined\"\n            size=\"small\"\n            type=\"password\"\n            value={apiKey}\n            onChange={(e) => setApiKey(e.target.value)}\n            placeholder=\"Your LibreChat API key\"\n            helperText=\"Overrides the server-configured API key\"\n          />\n          <Button\n            className={classes.testButton}\n            variant=\"outlined\"\n            color=\"primary\"\n            size=\"small\"\n            disabled={!apiKey.trim() || testing}\n            onClick={handleTest}\n            title=\"Check API key — sends a test message\"\n          >\n            {testing ? <CircularProgress size={20} /> : <CheckIcon />}\n          </Button>\n        </div>\n\n        <div className={classes.actions}>\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            size=\"small\"\n            onClick={handleSave}\n          >\n            Save\n          </Button>\n          <Button variant=\"outlined\" size=\"small\" onClick={handleClear}>\n            Clear\n          </Button>\n        </div>\n\n        {saved && (\n          <Typography className={classes.success}>Settings saved!</Typography>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useLibreChatSettings.esm.js

@@ -0,0 +1,50 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useApi, storageApiRef } from '@backstage/frontend-plugin-api';
+
+const STORAGE_BUCKET = "librechat-settings";
+const API_KEY_KEY = "apiKey";
+function useLibreChatSettings() {
+  const storageApi = useApi(storageApiRef);
+  const bucket = storageApi.forBucket(STORAGE_BUCKET);
+  const [settings, setSettings] = useState({
+    apiKey: ""
+  });
+  const safeGet = useCallback(
+    (key) => {
+      try {
+        return bucket.snapshot(key).value ?? "";
+      } catch {
+        return "";
+      }
+    },
+    [bucket]
+  );
+  useEffect(() => {
+    setSettings({
+      apiKey: safeGet(API_KEY_KEY)
+    });
+    const sub = bucket.observe$(API_KEY_KEY).subscribe((next) => {
+      setSettings((prev) => ({ ...prev, apiKey: next.value ?? "" }));
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [bucket, safeGet]);
+  const saveSettings = useCallback(
+    async (newSettings) => {
+      if (newSettings.apiKey) {
+        await bucket.set(API_KEY_KEY, newSettings.apiKey);
+      } else {
+        await bucket.remove(API_KEY_KEY);
+      }
+    },
+    [bucket]
+  );
+  const clearSettings = useCallback(async () => {
+    await bucket.remove(API_KEY_KEY);
+  }, [bucket]);
+  return { settings, saveSettings, clearSettings };
+}
+
+export { useLibreChatSettings };
+//# sourceMappingURL=useLibreChatSettings.esm.js.map

package/dist/hooks/useLibreChatSettings.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLibreChatSettings.esm.js","sources":["../../src/hooks/useLibreChatSettings.ts"],"sourcesContent":["import {useState, useEffect, useCallback} from \"react\";\nimport {useApi, storageApiRef} from \"@backstage/frontend-plugin-api\";\n\nconst STORAGE_BUCKET = \"librechat-settings\";\nconst API_KEY_KEY = \"apiKey\";\n\nexport interface LibreChatSettings {\n  apiKey: string;\n}\n\nexport function useLibreChatSettings() {\n  const storageApi = useApi(storageApiRef);\n  const bucket = storageApi.forBucket(STORAGE_BUCKET);\n\n  const [settings, setSettings] = useState<LibreChatSettings>({\n    apiKey: \"\",\n  });\n\n  const safeGet = useCallback(\n    (key: string): string => {\n      try {\n        return bucket.snapshot<string>(key).value ?? \"\";\n      } catch {\n        return \"\";\n      }\n    },\n    [bucket],\n  );\n\n  // Load settings on mount\n  useEffect(() => {\n    setSettings({\n      apiKey: safeGet(API_KEY_KEY),\n    });\n\n    // Subscribe to changes\n    const sub = bucket.observe$<string>(API_KEY_KEY).subscribe((next) => {\n      setSettings((prev) => ({...prev, apiKey: next.value ?? \"\"}));\n    });\n\n    return () => {\n      sub.unsubscribe();\n    };\n  }, [bucket, safeGet]);\n\n  const saveSettings = useCallback(\n    async (newSettings: LibreChatSettings) => {\n      if (newSettings.apiKey) {\n        await bucket.set(API_KEY_KEY, newSettings.apiKey);\n      } else {\n        await bucket.remove(API_KEY_KEY);\n      }\n    },\n    [bucket],\n  );\n\n  const clearSettings = useCallback(async () => {\n    await bucket.remove(API_KEY_KEY);\n  }, [bucket]);\n\n  return {settings, saveSettings, clearSettings};\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAA,GAAiB,oBAAA;AACvB,MAAM,WAAA,GAAc,QAAA;AAMb,SAAS,oBAAA,GAAuB;AACrC,EAAA,MAAM,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,CAAU,cAAc,CAAA;AAElD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,CAA4B;AAAA,IAC1D,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,CAAC,GAAA,KAAwB;AACvB,MAAA,IAAI;AACF,QAAA,OAAO,MAAA,CAAO,QAAA,CAAiB,GAAG,CAAA,CAAE,KAAA,IAAS,EAAA;AAAA,MAC/C,CAAA,CAAA,MAAQ;AACN,QAAA,OAAO,EAAA;AAAA,MACT;AAAA,IACF,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY;AAAA,MACV,MAAA,EAAQ,QAAQ,WAAW;AAAA,KAC5B,CAAA;AAGD,IAAA,MAAM,MAAM,MAAA,CAAO,QAAA,CAAiB,WAAW,CAAA,CAAE,SAAA,CAAU,CAAC,IAAA,KAAS;AACnE,MAAA,WAAA,CAAY,CAAC,UAAU,EAAC,GAAG,MAAM,MAAA,EAAQ,IAAA,CAAK,KAAA,IAAS,EAAA,EAAE,CAAE,CAAA;AAAA,IAC7D,CAAC,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,WAAA,EAAY;AAAA,IAClB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAEpB,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,OAAO,WAAA,KAAmC;AACxC,MAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,QAAA,MAAM,MAAA,CAAO,GAAA,CAAI,WAAA,EAAa,WAAA,CAAY,MAAM,CAAA;AAAA,MAClD,CAAA,MAAO;AACL,QAAA,MAAM,MAAA,CAAO,OAAO,WAAW,CAAA;AAAA,MACjC;AAAA,IACF,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,aAAA,GAAgB,YAAY,YAAY;AAC5C,IAAA,MAAM,MAAA,CAAO,OAAO,WAAW,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,EAAC,QAAA,EAAU,YAAA,EAAc,aAAA,EAAa;AAC/C;;;;"}

package/dist/hooks/usePageContext.esm.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+
+function normalizeTitle(title) {
+  const parts = title.split("|").map((part) => part.trim()).filter(Boolean);
+  const deduped = parts.filter((part, index) => part !== parts[index - 1]);
+  return deduped.join(" | ");
+}
+function usePageContext() {
+  const [context, setContext] = useState(() => ({
+    url: window.location.href,
+    path: window.location.pathname,
+    title: normalizeTitle(document.title)
+  }));
+  useEffect(() => {
+    const update = () => {
+      setContext({
+        url: window.location.href,
+        path: window.location.pathname,
+        title: normalizeTitle(document.title)
+      });
+    };
+    window.addEventListener("popstate", update);
+    const titleEl = document.querySelector("title");
+    let titleObserver;
+    if (titleEl) {
+      titleObserver = new MutationObserver(update);
+      titleObserver.observe(titleEl, {
+        childList: true,
+        characterData: true,
+        subtree: true
+      });
+    }
+    const origPush = history.pushState.bind(history);
+    const origReplace = history.replaceState.bind(history);
+    history.pushState = (...args) => {
+      origPush(...args);
+      update();
+    };
+    history.replaceState = (...args) => {
+      origReplace(...args);
+      update();
+    };
+    return () => {
+      window.removeEventListener("popstate", update);
+      titleObserver?.disconnect();
+      history.pushState = origPush;
+      history.replaceState = origReplace;
+    };
+  }, []);
+  return context;
+}
+
+export { usePageContext };
+//# sourceMappingURL=usePageContext.esm.js.map

package/dist/hooks/usePageContext.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageContext.esm.js","sources":["../../src/hooks/usePageContext.ts"],"sourcesContent":["import {useState, useEffect} from \"react\";\n\nexport interface PageContext {\n  url: string;\n  path: string;\n  title: string;\n}\n\n/**\n * Normalizes a browser document title by collapsing repeated segments.\n *\n * Backstage builds titles as `<page> | <app.title>`. On pages without a\n * dedicated title the page segment falls back to the app title, producing\n * duplicates like `Backstage | Backstage`. This collapses adjacent repeats.\n */\nfunction normalizeTitle(title: string): string {\n  const parts = title\n    .split(\"|\")\n    .map((part) => part.trim())\n    .filter(Boolean);\n  const deduped = parts.filter((part, index) => part !== parts[index - 1]);\n  return deduped.join(\" | \");\n}\n\n/**\n * Hook that tracks the current Backstage page context.\n * Captures URL, path, and document title so it can be sent\n * alongside chat messages for contextual answers.\n */\nexport function usePageContext(): PageContext {\n  const [context, setContext] = useState<PageContext>(() => ({\n    url: window.location.href,\n    path: window.location.pathname,\n    title: normalizeTitle(document.title),\n  }));\n\n  useEffect(() => {\n    const update = () => {\n      setContext({\n        url: window.location.href,\n        path: window.location.pathname,\n        title: normalizeTitle(document.title),\n      });\n    };\n\n    // Listen for navigation changes (pushState / popState)\n    window.addEventListener(\"popstate\", update);\n\n    // Observe title changes via MutationObserver\n    const titleEl = document.querySelector(\"title\");\n    let titleObserver: MutationObserver | undefined;\n    if (titleEl) {\n      titleObserver = new MutationObserver(update);\n      titleObserver.observe(titleEl, {\n        childList: true,\n        characterData: true,\n        subtree: true,\n      });\n    }\n\n    // Patch pushState/replaceState to detect SPA navigation\n    const origPush = history.pushState.bind(history);\n    const origReplace = history.replaceState.bind(history);\n    history.pushState = (...args) => {\n      origPush(...args);\n      update();\n    };\n    history.replaceState = (...args) => {\n      origReplace(...args);\n      update();\n    };\n\n    return () => {\n      window.removeEventListener(\"popstate\", update);\n      titleObserver?.disconnect();\n      history.pushState = origPush;\n      history.replaceState = origReplace;\n    };\n  }, []);\n\n  return context;\n}\n"],"names":[],"mappings":";;AAeA,SAAS,eAAe,KAAA,EAAuB;AAC7C,EAAA,MAAM,KAAA,GAAQ,KAAA,CACX,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,IAAA,EAAM,CAAA,CACzB,OAAO,OAAO,CAAA;AACjB,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,MAAA,CAAO,CAAC,IAAA,EAAM,UAAU,IAAA,KAAS,KAAA,CAAM,KAAA,GAAQ,CAAC,CAAC,CAAA;AACvE,EAAA,OAAO,OAAA,CAAQ,KAAK,KAAK,CAAA;AAC3B;AAOO,SAAS,cAAA,GAA8B;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAsB,OAAO;AAAA,IACzD,GAAA,EAAK,OAAO,QAAA,CAAS,IAAA;AAAA,IACrB,IAAA,EAAM,OAAO,QAAA,CAAS,QAAA;AAAA,IACtB,KAAA,EAAO,cAAA,CAAe,QAAA,CAAS,KAAK;AAAA,GACtC,CAAE,CAAA;AAEF,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,UAAA,CAAW;AAAA,QACT,GAAA,EAAK,OAAO,QAAA,CAAS,IAAA;AAAA,QACrB,IAAA,EAAM,OAAO,QAAA,CAAS,QAAA;AAAA,QACtB,KAAA,EAAO,cAAA,CAAe,QAAA,CAAS,KAAK;AAAA,OACrC,CAAA;AAAA,IACH,CAAA;AAGA,IAAA,MAAA,CAAO,gBAAA,CAAiB,YAAY,MAAM,CAAA;AAG1C,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC9C,IAAA,IAAI,aAAA;AACJ,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,aAAA,GAAgB,IAAI,iBAAiB,MAAM,CAAA;AAC3C,MAAA,aAAA,CAAc,QAAQ,OAAA,EAAS;AAAA,QAC7B,SAAA,EAAW,IAAA;AAAA,QACX,aAAA,EAAe,IAAA;AAAA,QACf,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH;AAGA,IAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,SAAA,CAAU,IAAA,CAAK,OAAO,CAAA;AAC/C,IAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,YAAA,CAAa,IAAA,CAAK,OAAO,CAAA;AACrD,IAAA,OAAA,CAAQ,SAAA,GAAY,IAAI,IAAA,KAAS;AAC/B,MAAA,QAAA,CAAS,GAAG,IAAI,CAAA;AAChB,MAAA,MAAA,EAAO;AAAA,IACT,CAAA;AACA,IAAA,OAAA,CAAQ,YAAA,GAAe,IAAI,IAAA,KAAS;AAClC,MAAA,WAAA,CAAY,GAAG,IAAI,CAAA;AACnB,MAAA,MAAA,EAAO;AAAA,IACT,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,YAAY,MAAM,CAAA;AAC7C,MAAA,aAAA,EAAe,UAAA,EAAW;AAC1B,MAAA,OAAA,CAAQ,SAAA,GAAY,QAAA;AACpB,MAAA,OAAA,CAAQ,YAAA,GAAe,WAAA;AAAA,IACzB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import React from 'react';
+
+/**
+ * The LibreChat frontend plugin.
+ *
+ * Provides an AI chat bubble overlay powered by LibreChat's Agents API.
+ * Controlled via `librechat.enabled` config (defaults to true).
+ *
+ * @public
+ */
+declare const libreChatPlugin: _backstage_frontend_plugin_api.OverridableFrontendPlugin<{}, {}, {
+    "api:librechat/librechat": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        kind: "api";
+        name: "librechat";
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        inputs: {};
+        params: <TApi, TImpl extends TApi, TDeps extends {
+            [x: string]: unknown;
+        }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
+    }>;
+    "app-root-element:librechat/chat-bubble": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        kind: "app-root-element";
+        name: "chat-bubble";
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<React.JSX.Element, "core.reactElement", {}>;
+        inputs: {};
+        params: {
+            element: JSX.Element;
+        };
+    }>;
+}>;
+
+/** A single chat message. */
+interface ChatMessage {
+    role: "user" | "assistant" | "system";
+    content: string;
+}
+/**
+ * API for communicating with LibreChat through the backend proxy.
+ *
+ * @public
+ */
+interface LibreChatApi {
+    /**
+     * Sends messages to LibreChat and yields streamed content chunks.
+     *
+     * @param messages - Conversation history
+     * @param options - Optional override for apiKey
+     * @returns An async generator yielding content strings as they arrive
+     */
+    sendMessage(messages: ChatMessage[], options?: {
+        apiKey?: string;
+    }): AsyncGenerator<string, void, unknown>;
+    /**
+     * Checks that the given API key is valid by sending a short test message.
+     *
+     * @param apiKey - API key to validate
+     * @returns The assistant's reply
+     */
+    checkApiKey(apiKey: string): Promise<string>;
+}
+/**
+ * API reference for the LibreChat API.
+ *
+ * @public
+ */
+declare const libreChatApiRef: _backstage_frontend_plugin_api.ApiRef<LibreChatApi> & {
+    readonly $$type: "@backstage/ApiRef";
+};
+
+export { libreChatPlugin as default, libreChatApiRef };
+export type { ChatMessage, LibreChatApi };

package/dist/index.esm.js

@@ -0,0 +1,3 @@
+export { libreChatPlugin as default } from './plugin.esm.js';
+export { libreChatApiRef } from './api.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/plugin.esm.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { ApiBlueprint, createApiFactory, configApiRef, fetchApiRef, AppRootElementBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { DefaultLibreChatApi, libreChatApiRef } from './api.esm.js';
+import { ChatBubble } from './components/ChatBubble.esm.js';
+
+const libreChatApi = ApiBlueprint.make({
+  name: "librechat",
+  params: (defineParams) => defineParams(
+    createApiFactory({
+      api: libreChatApiRef,
+      deps: { fetchApi: fetchApiRef, configApi: configApiRef },
+      factory: ({ fetchApi, configApi }) => new DefaultLibreChatApi({ fetchApi, configApi })
+    })
+  )
+});
+const chatBubbleRootElement = AppRootElementBlueprint.make({
+  name: "chat-bubble",
+  params: {
+    element: /* @__PURE__ */ jsx(ChatBubble, {})
+  }
+});
+const libreChatPlugin = createFrontendPlugin({
+  pluginId: "librechat",
+  extensions: [libreChatApi, chatBubbleRootElement]
+});
+
+export { libreChatPlugin };
+//# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  createFrontendPlugin,\n  ApiBlueprint,\n  AppRootElementBlueprint,\n  fetchApiRef,\n  configApiRef,\n  createApiFactory,\n} from \"@backstage/frontend-plugin-api\";\nimport {libreChatApiRef, DefaultLibreChatApi} from \"./api\";\nimport {ChatBubble} from \"./components/ChatBubble\";\n\n/** Utility API extension providing the LibreChat API client. */\nconst libreChatApi = ApiBlueprint.make({\n  name: \"librechat\",\n  params: defineParams =>\n    defineParams(\n      createApiFactory({\n        api: libreChatApiRef,\n        deps: {fetchApi: fetchApiRef, configApi: configApiRef},\n        factory: ({fetchApi, configApi}) =>\n          new DefaultLibreChatApi({fetchApi, configApi}),\n      }),\n    ),\n});\n\n/** Global chat bubble overlay rendered across all pages. */\nconst chatBubbleRootElement = AppRootElementBlueprint.make({\n  name: \"chat-bubble\",\n  params: {\n    element: <ChatBubble />,\n  },\n});\n\n/**\n * The LibreChat frontend plugin.\n *\n * Provides an AI chat bubble overlay powered by LibreChat's Agents API.\n * Controlled via `librechat.enabled` config (defaults to true).\n *\n * @public\n */\nexport const libreChatPlugin = createFrontendPlugin({\n  pluginId: \"librechat\",\n  extensions: [libreChatApi, chatBubbleRootElement],\n});\n"],"names":[],"mappings":";;;;;AAaA,MAAM,YAAA,GAAe,aAAa,IAAA,CAAK;AAAA,EACrC,IAAA,EAAM,WAAA;AAAA,EACN,QAAQ,CAAA,YAAA,KACN,YAAA;AAAA,IACE,gBAAA,CAAiB;AAAA,MACf,GAAA,EAAK,eAAA;AAAA,MACL,IAAA,EAAM,EAAC,QAAA,EAAU,WAAA,EAAa,WAAW,YAAA,EAAY;AAAA,MACrD,OAAA,EAAS,CAAC,EAAC,QAAA,EAAU,SAAA,EAAS,KAC5B,IAAI,mBAAA,CAAoB,EAAC,QAAA,EAAU,SAAA,EAAU;AAAA,KAChD;AAAA;AAEP,CAAC,CAAA;AAGD,MAAM,qBAAA,GAAwB,wBAAwB,IAAA,CAAK;AAAA,EACzD,IAAA,EAAM,aAAA;AAAA,EACN,MAAA,EAAQ;AAAA,IACN,OAAA,sBAAU,UAAA,EAAA,EAAW;AAAA;AAEzB,CAAC,CAAA;AAUM,MAAM,kBAAkB,oBAAA,CAAqB;AAAA,EAClD,QAAA,EAAU,WAAA;AAAA,EACV,UAAA,EAAY,CAAC,YAAA,EAAc,qBAAqB;AAClD,CAAC;;;;"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@nospt/backstage-plugin-librechat",
+  "version": "0.1.0",
+  "description": "Backstage frontend plugin adding an AI chat bubble powered by LibreChat Agents API",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "librechat",
+    "pluginPackages": [
+      "@nospt/backstage-plugin-librechat",
+      "@nospt/backstage-plugin-librechat-backend"
+    ]
+  },
+  "configSchema": "config.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "tsc": "tsc",
+    "lint": "backstage-cli package lint",
+    "clean": "backstage-cli package clean",
+    "test": "backstage-cli package test"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.18.0",
+    "@backstage/frontend-plugin-api": "^0.15.0",
+    "@backstage/theme": "^0.7.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "lodash": "^4.17.21",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.20.0",
+    "remark-gfm": "^4.0.0",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.36.0",
+    "@backstage/config": "^1.3.0",
+    "@backstage/core-app-api": "^1.15.0",
+    "@backstage/frontend-dev-utils": "^0.1.0",
+    "@jest/environment-jsdom-abstract": "^30.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "i18next": "^23.0.0",
+    "jest": "^29.0.0 || ^30.0.0",
+    "jsdom": "^27.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "~5.4.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}