@red-hat-developer-hub/backstage-plugin-intelligent-assistant 3.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Router.esm.js","sources":["../../src/components/Router.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 */\n\nimport { Route, Routes } from 'react-router-dom';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { StylesProvider as StylesProviderV4 } from '@material-ui/core/styles';\nimport { StylesProvider } from '@mui/styles';\n\nimport {\n  generateClassName,\n  generateClassNameV4,\n} from '../utils/generateClassName';\nimport { LightspeedPage } from './LightspeedPage';\n\n/**\n * @public\n */\nexport const Router = () => {\n  const configApi = useApi(configApiRef);\n  const notebooksEnabled =\n    configApi.getOptionalBoolean('intelligent-assistant.notebooks.enabled') ??\n    false;\n\n  return (\n    <StylesProvider generateClassName={generateClassName}>\n      <StylesProviderV4 generateClassName={generateClassNameV4}>\n        <Routes>\n          <Route path=\"/\" element={<LightspeedPage />} />\n          <Route\n            path=\"/conversation/:conversationId\"\n            element={<LightspeedPage />}\n          />\n          {notebooksEnabled && (\n            <>\n              <Route path=\"/notebooks\" element={<LightspeedPage />} />\n              <Route\n                path=\"/notebooks/:notebookId\"\n                element={<LightspeedPage />}\n              />\n            </>\n          )}\n        </Routes>\n      </StylesProviderV4>\n    </StylesProvider>\n  );\n};\n"],"names":["StylesProviderV4"],"mappings":";;;;;;;;AAgCO,MAAM,SAAS,MAAM;AAC1B,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,gBAAA,GACJ,SAAA,CAAU,kBAAA,CAAmB,yCAAyC,CAAA,IACtE,KAAA;AAEF,EAAA,uBACE,GAAA,CAAC,kBAAe,iBAAA,EACd,QAAA,kBAAA,GAAA,CAACA,oBAAiB,iBAAA,EAAmB,mBAAA,EACnC,+BAAC,MAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,GAAA,EAAI,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,oBAC7C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,+BAAA;AAAA,QACL,OAAA,sBAAU,cAAA,EAAA,EAAe;AAAA;AAAA,KAC3B;AAAA,IACC,oCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAM,IAAA,EAAK,YAAA,EAAa,OAAA,kBAAS,GAAA,CAAC,kBAAe,CAAA,EAAI,CAAA;AAAA,sBACtD,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,wBAAA;AAAA,UACL,OAAA,sBAAU,cAAA,EAAA,EAAe;AAAA;AAAA;AAC3B,KAAA,EACF;AAAA,GAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/SourcesChipModal.esm.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import { Popover, Button, HelperText, HelperTextItem, List, ListItem, Tooltip } from '@patternfly/react-core';
+import { LinkIcon, InfoCircleIcon } from '@patternfly/react-icons';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { FileTypeIcon } from './notebooks/FileTypeIcon.esm.js';
+
+const POPOVER_WIDTH = "400px";
+const useStyles = makeStyles((theme) => ({
+  sourcesPopover: {
+    "& .pf-v6-c-popover__title": {
+      alignItems: "flex-start"
+    },
+    "& .pf-v6-c-popover__title-text": {
+      margin: 0
+    },
+    "& .pf-v6-c-popover__header": {
+      paddingBlockEnd: theme.spacing(2)
+    },
+    "& .pf-v6-c-popover__body": {
+      paddingBlockStart: 0
+    }
+  },
+  chipButton: {
+    padding: "4px 12px",
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    borderRadius: 16,
+    backgroundColor: "transparent",
+    color: "var(--pf-t--global--text--color--regular, #1b1d21)",
+    "&:hover": {
+      backgroundColor: "var(--pf-t--global--background--color--secondary--default, #e0e0e0)"
+    },
+    "& .pf-v6-c-button__icon": {
+      color: "inherit"
+    }
+  },
+  helperText: {
+    marginBottom: theme.spacing(1.5),
+    color: "var(--pf-t--global--text--color--subtle, #c7c7c7)"
+  },
+  sourcesList: {
+    maxHeight: 320,
+    overflowY: "auto"
+  },
+  sourceItem: {
+    alignItems: "center",
+    "& .pf-v6-c-list__item-text": {
+      minWidth: 0
+    }
+  },
+  sourceContent: {
+    flex: 1,
+    minWidth: 0
+  },
+  sourceTitle: {
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  sourceBody: {
+    fontSize: "0.8125rem",
+    color: "var(--pf-t--global--text--color--subtle, #c7c7c7)",
+    marginTop: 2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical"
+  }
+}));
+const SourcesChipModal = ({ sources }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const count = sources.sources?.length ?? 0;
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      className: classes.sourcesPopover,
+      position: "top-start",
+      triggerAction: "click",
+      "aria-label": t("sources.modal.title"),
+      headerContent: t("sources.modal.title"),
+      headerIcon: /* @__PURE__ */ jsx(LinkIcon, {}),
+      closeBtnAriaLabel: t("sources.popover.closeAriaLabel"),
+      minWidth: POPOVER_WIDTH,
+      maxWidth: POPOVER_WIDTH,
+      appendTo: () => document.body,
+      bodyContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(HelperText, { className: classes.helperText, children: /* @__PURE__ */ jsx(HelperTextItem, { variant: "indeterminate", icon: /* @__PURE__ */ jsx(InfoCircleIcon, {}), children: t("sources.modal.description") }) }),
+        /* @__PURE__ */ jsx(
+          List,
+          {
+            isPlain: true,
+            className: classes.sourcesList,
+            "aria-label": t("sources.modal.title"),
+            children: sources.sources.map((source, index) => {
+              const title = source.title ?? `Source ${index + 1}`;
+              return /* @__PURE__ */ jsx(
+                ListItem,
+                {
+                  className: classes.sourceItem,
+                  icon: /* @__PURE__ */ jsx(FileTypeIcon, { fileName: title }),
+                  children: /* @__PURE__ */ jsxs("div", { className: classes.sourceContent, children: [
+                    /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("div", { className: classes.sourceTitle, children: title }) }),
+                    source.body && /* @__PURE__ */ jsx("div", { className: classes.sourceBody, children: source.body })
+                  ] })
+                },
+                `${source.title}-${index}`
+              );
+            })
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(Button, { variant: "link", icon: /* @__PURE__ */ jsx(LinkIcon, {}), className: classes.chipButton, children: t("sources.chip.label", { count }) })
+    }
+  );
+};
+
+export { SourcesChipModal };
+//# sourceMappingURL=SourcesChipModal.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourcesChipModal.esm.js","sources":["../../src/components/SourcesChipModal.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 */\n\nimport { makeStyles } from '@material-ui/core';\nimport { SourcesCardProps } from '@patternfly/chatbot';\nimport {\n  Button,\n  HelperText,\n  HelperTextItem,\n  List,\n  ListItem,\n  Popover,\n  Tooltip,\n} from '@patternfly/react-core';\nimport { InfoCircleIcon, LinkIcon } from '@patternfly/react-icons';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { FileTypeIcon } from './notebooks/FileTypeIcon';\n\nconst POPOVER_WIDTH = '400px';\n\nconst useStyles = makeStyles(theme => ({\n  sourcesPopover: {\n    '& .pf-v6-c-popover__title': {\n      alignItems: 'flex-start',\n    },\n    '& .pf-v6-c-popover__title-text': {\n      margin: 0,\n    },\n    '& .pf-v6-c-popover__header': {\n      paddingBlockEnd: theme.spacing(2),\n    },\n    '& .pf-v6-c-popover__body': {\n      paddingBlockStart: 0,\n    },\n  },\n  chipButton: {\n    padding: '4px 12px',\n    fontSize: '0.8125rem',\n    fontWeight: 500,\n    borderRadius: 16,\n    backgroundColor: 'transparent',\n    color: 'var(--pf-t--global--text--color--regular, #1b1d21)',\n    '&:hover': {\n      backgroundColor:\n        'var(--pf-t--global--background--color--secondary--default, #e0e0e0)',\n    },\n    '& .pf-v6-c-button__icon': {\n      color: 'inherit',\n    },\n  },\n  helperText: {\n    marginBottom: theme.spacing(1.5),\n    color: 'var(--pf-t--global--text--color--subtle, #c7c7c7)',\n  },\n  sourcesList: {\n    maxHeight: 320,\n    overflowY: 'auto' as const,\n  },\n  sourceItem: {\n    alignItems: 'center',\n    '& .pf-v6-c-list__item-text': {\n      minWidth: 0,\n    },\n  },\n  sourceContent: {\n    flex: 1,\n    minWidth: 0,\n  },\n  sourceTitle: {\n    fontSize: '0.875rem',\n    fontWeight: 500,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  sourceBody: {\n    fontSize: '0.8125rem',\n    color: 'var(--pf-t--global--text--color--subtle, #c7c7c7)',\n    marginTop: 2,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n  },\n}));\n\ntype SourcesChipModalProps = {\n  sources: SourcesCardProps;\n};\n\nexport const SourcesChipModal = ({ sources }: SourcesChipModalProps) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const count = sources.sources?.length ?? 0;\n  if (count === 0) return null;\n\n  return (\n    <Popover\n      className={classes.sourcesPopover}\n      position=\"top-start\"\n      triggerAction=\"click\"\n      aria-label={t('sources.modal.title')}\n      headerContent={t('sources.modal.title')}\n      headerIcon={<LinkIcon />}\n      closeBtnAriaLabel={t('sources.popover.closeAriaLabel')}\n      minWidth={POPOVER_WIDTH}\n      maxWidth={POPOVER_WIDTH}\n      appendTo={() => document.body}\n      bodyContent={\n        <>\n          <HelperText className={classes.helperText}>\n            <HelperTextItem variant=\"indeterminate\" icon={<InfoCircleIcon />}>\n              {t('sources.modal.description')}\n            </HelperTextItem>\n          </HelperText>\n          <List\n            isPlain\n            className={classes.sourcesList}\n            aria-label={t('sources.modal.title')}\n          >\n            {sources.sources.map((source, index) => {\n              const title = source.title ?? `Source ${index + 1}`;\n              return (\n                <ListItem\n                  key={`${source.title}-${index}`}\n                  className={classes.sourceItem}\n                  icon={<FileTypeIcon fileName={title} />}\n                >\n                  <div className={classes.sourceContent}>\n                    <Tooltip content={title}>\n                      <div className={classes.sourceTitle}>{title}</div>\n                    </Tooltip>\n                    {source.body && (\n                      <div className={classes.sourceBody}>{source.body}</div>\n                    )}\n                  </div>\n                </ListItem>\n              );\n            })}\n          </List>\n        </>\n      }\n    >\n      <Button variant=\"link\" icon={<LinkIcon />} className={classes.chipButton}>\n        {(t as Function)('sources.chip.label', { count })}\n      </Button>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ToolCallContent.esm.js

@@ -0,0 +1,208 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import { Message } from '@patternfly/chatbot';
+import { Flex, FlexItem, Content, ContentVariants, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Label } from '@patternfly/react-core';
+import { WrenchIcon } from '@patternfly/react-icons';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { formatToolResponseForMarkdown } from '../utils/formatToolResponseForMarkdown.esm.js';
+
+const useStyles = makeStyles(() => ({
+  codeBlock: {
+    "& .pf-chatbot__message-code-block": {
+      border: "1px solid var(--pf-t--global--border--color--default)",
+      borderRadius: "var(--pf-t--global--border--radius--small)"
+    }
+  }
+}));
+const ToolCallContent = ({
+  toolCall,
+  role = "bot"
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  const formatExecutionTime = (seconds) => {
+    if (seconds === void 0) return "";
+    if (seconds < 1) return `${Math.round(seconds * 1e3)}ms`;
+    return `${seconds.toFixed(2)}s`;
+  };
+  const getParameterKeys = () => {
+    if (!toolCall.arguments) return [];
+    return Object.keys(toolCall.arguments).filter(
+      (key) => key !== "server_label" && toolCall.arguments[key] !== "" && toolCall.arguments[key] !== null
+    );
+  };
+  const getThinkingTime = () => {
+    if (toolCall.startTime && toolCall.endTime) {
+      return Math.round((toolCall.endTime - toolCall.startTime) / 1e3);
+    }
+    return 0;
+  };
+  const thinkingTime = getThinkingTime();
+  const parameterKeys = getParameterKeys();
+  const mcpServerTitle = (() => {
+    const label = toolCall.arguments?.server_label;
+    if (typeof label === "string" && label.trim() !== "") {
+      return label.trim();
+    }
+    return t("toolCall.mcpServer");
+  })();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: { default: "column" },
+      spaceItems: { default: "spaceItemsSm" },
+      children: [
+        thinkingTime > 0 && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Content, { component: ContentVariants.small, children: t("toolCall.thinking", {
+          seconds: String(thinkingTime)
+        }) }) }),
+        /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Content, { component: ContentVariants.p, children: t("toolCall.summary") }) }),
+        /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              border: "1px solid var(--pf-t--global--border--color--default)",
+              borderRadius: "var(--pf-t--global--border--radius--small)",
+              padding: "var(--pf-t--global--spacer--md)"
+            },
+            children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                direction: { default: "column" },
+                spaceItems: { default: "spaceItemsSm" },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    FlexItem,
+                    {
+                      style: {
+                        borderBottom: "1px solid var(--pf-t--global--border--color--default)",
+                        paddingBottom: "var(--pf-t--global--spacer--sm)"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          Content,
+                          {
+                            component: ContentVariants.p,
+                            style: { marginBlockEnd: 0 },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                WrenchIcon,
+                                {
+                                  style: {
+                                    color: "var(--pf-t--global--icon--color--brand--default)",
+                                    marginRight: "0.5em"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("strong", { children: mcpServerTitle })
+                            ]
+                          }
+                        ),
+                        toolCall.executionTime !== void 0 && /* @__PURE__ */ jsxs(Content, { component: ContentVariants.small, children: [
+                          t("toolCall.executionTime"),
+                          formatExecutionTime(toolCall.executionTime)
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsxs(
+                    DescriptionList,
+                    {
+                      style: {
+                        "--pf-v6-c-description-list--RowGap": "var(--pf-t--global--spacer--md)"
+                      },
+                      "aria-label": "Tool response",
+                      children: [
+                        parameterKeys.length > 0 && /* @__PURE__ */ jsxs(
+                          DescriptionListGroup,
+                          {
+                            style: {
+                              "--pf-v6-c-description-list__group--RowGap": "var(--pf-t--global--spacer--xs)"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(DescriptionListTerm, { children: t("toolCall.parameters", {
+                                defaultValue: "Parameters"
+                              }) || "Parameters" }),
+                              /* @__PURE__ */ jsx(
+                                DescriptionListDescription,
+                                {
+                                  style: { marginInlineStart: 0 },
+                                  children: /* @__PURE__ */ jsxs(Flex, { direction: { default: "column" }, children: [
+                                    toolCall.description && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Content, { component: ContentVariants.small, children: toolCall.description }) }),
+                                    /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                                      Flex,
+                                      {
+                                        gap: { default: "gapSm" },
+                                        flexWrap: { default: "wrap" },
+                                        children: parameterKeys.map((key) => /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Label, { variant: "outline", color: "blue", children: key }) }, key))
+                                      }
+                                    ) })
+                                  ] })
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        toolCall.response && /* @__PURE__ */ jsxs(
+                          DescriptionListGroup,
+                          {
+                            style: {
+                              "--pf-v6-c-description-list__group--RowGap": "var(--pf-t--global--spacer--xs)"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Flex,
+                                {
+                                  alignItems: { default: "alignItemsCenter" },
+                                  justifyContent: { default: "justifyContentSpaceBetween" },
+                                  children: /* @__PURE__ */ jsx(FlexItem, { flex: { default: "flex_1" }, children: /* @__PURE__ */ jsxs("strong", { children: [
+                                    " ",
+                                    t("toolCall.response")
+                                  ] }) })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                DescriptionListDescription,
+                                {
+                                  style: { marginInlineStart: 0 },
+                                  children: /* @__PURE__ */ jsx(
+                                    Flex,
+                                    {
+                                      direction: { default: "column" },
+                                      spaceItems: { default: "spaceItemsXs" },
+                                      children: /* @__PURE__ */ jsx(FlexItem, { className: classes.codeBlock, children: /* @__PURE__ */ jsx(
+                                        Message,
+                                        {
+                                          content: formatToolResponseForMarkdown(
+                                            toolCall.response
+                                          ),
+                                          role,
+                                          codeBlockProps: {
+                                            isExpandable: true,
+                                            expandableSectionProps: {
+                                              truncateMaxLines: 12
+                                            }
+                                          }
+                                        }
+                                      ) })
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { ToolCallContent };
+//# sourceMappingURL=ToolCallContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCallContent.esm.js","sources":["../../src/components/ToolCallContent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 */\n\nimport { makeStyles } from '@material-ui/core';\nimport { Message } from '@patternfly/chatbot';\nimport {\n  Content,\n  ContentVariants,\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  Flex,\n  FlexItem,\n  Label,\n} from '@patternfly/react-core';\nimport { WrenchIcon } from '@patternfly/react-icons';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { ToolCall } from '../types';\nimport { formatToolResponseForMarkdown } from '../utils/formatToolResponseForMarkdown';\n\ninterface ToolCallContentProps {\n  toolCall: ToolCall;\n  role?: 'user' | 'bot';\n}\n\nconst useStyles = makeStyles(() => ({\n  codeBlock: {\n    '& .pf-chatbot__message-code-block': {\n      border: '1px solid var(--pf-t--global--border--color--default)',\n      borderRadius: 'var(--pf-t--global--border--radius--small)',\n    },\n  },\n}));\n\n/**\n * Lightweight component for rendering tool call expandable content.\n * Used inside PatternFly's ToolCall component's expandableContent prop.\n */\nexport const ToolCallContent = ({\n  toolCall,\n  role = 'bot',\n}: ToolCallContentProps) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const formatExecutionTime = (seconds?: number): string => {\n    if (seconds === undefined) return '';\n    if (seconds < 1) return `${Math.round(seconds * 1000)}ms`;\n    return `${seconds.toFixed(2)}s`;\n  };\n\n  const getParameterKeys = (): string[] => {\n    if (!toolCall.arguments) return [];\n    return Object.keys(toolCall.arguments).filter(\n      key =>\n        key !== 'server_label' &&\n        toolCall.arguments[key] !== '' &&\n        toolCall.arguments[key] !== null,\n    );\n  };\n\n  const getThinkingTime = (): number => {\n    if (toolCall.startTime && toolCall.endTime) {\n      return Math.round((toolCall.endTime - toolCall.startTime) / 1000);\n    }\n    return 0;\n  };\n\n  const thinkingTime = getThinkingTime();\n  const parameterKeys = getParameterKeys();\n\n  const mcpServerTitle = (() => {\n    const label = toolCall.arguments?.server_label;\n    if (typeof label === 'string' && label.trim() !== '') {\n      return label.trim();\n    }\n    return t('toolCall.mcpServer');\n  })();\n\n  return (\n    <Flex\n      direction={{ default: 'column' }}\n      spaceItems={{ default: 'spaceItemsSm' }}\n    >\n      {/* Thinking Time */}\n      {thinkingTime > 0 && (\n        <FlexItem>\n          <Content component={ContentVariants.small}>\n            {t('toolCall.thinking' as any, {\n              seconds: String(thinkingTime),\n            })}\n          </Content>\n        </FlexItem>\n      )}\n\n      {/* Summary */}\n      <FlexItem>\n        <Content component={ContentVariants.p}>{t('toolCall.summary')}</Content>\n      </FlexItem>\n\n      {/* Tool Header with MCP Server */}\n      <FlexItem>\n        <div\n          style={{\n            border: '1px solid var(--pf-t--global--border--color--default)',\n            borderRadius: 'var(--pf-t--global--border--radius--small)',\n            padding: 'var(--pf-t--global--spacer--md)',\n          }}\n        >\n          <Flex\n            direction={{ default: 'column' }}\n            spaceItems={{ default: 'spaceItemsSm' }}\n          >\n            <FlexItem\n              style={{\n                borderBottom:\n                  '1px solid var(--pf-t--global--border--color--default)',\n                paddingBottom: 'var(--pf-t--global--spacer--sm)',\n              }}\n            >\n              <Content\n                component={ContentVariants.p}\n                style={{ marginBlockEnd: 0 }}\n              >\n                <WrenchIcon\n                  style={{\n                    color: 'var(--pf-t--global--icon--color--brand--default)',\n                    marginRight: '0.5em',\n                  }}\n                />\n                <strong>{mcpServerTitle}</strong>\n              </Content>\n              {toolCall.executionTime !== undefined && (\n                <Content component={ContentVariants.small}>\n                  {t('toolCall.executionTime')}\n                  {formatExecutionTime(toolCall.executionTime)}\n                </Content>\n              )}\n            </FlexItem>\n\n            {/* Description List for Parameters and Response */}\n            <FlexItem>\n              <DescriptionList\n                style={\n                  {\n                    '--pf-v6-c-description-list--RowGap':\n                      'var(--pf-t--global--spacer--md)',\n                  } as any\n                }\n                aria-label=\"Tool response\"\n              >\n                {/* Parameters Section */}\n                {parameterKeys.length > 0 && (\n                  <DescriptionListGroup\n                    style={\n                      {\n                        '--pf-v6-c-description-list__group--RowGap':\n                          'var(--pf-t--global--spacer--xs)',\n                      } as any\n                    }\n                  >\n                    <DescriptionListTerm>\n                      {t('toolCall.parameters' as any, {\n                        defaultValue: 'Parameters',\n                      }) || 'Parameters'}\n                    </DescriptionListTerm>\n                    <DescriptionListDescription\n                      style={{ marginInlineStart: 0 }}\n                    >\n                      <Flex direction={{ default: 'column' }}>\n                        {toolCall.description && (\n                          <FlexItem>\n                            <Content component={ContentVariants.small}>\n                              {toolCall.description}\n                            </Content>\n                          </FlexItem>\n                        )}\n                        <FlexItem>\n                          <Flex\n                            gap={{ default: 'gapSm' }}\n                            flexWrap={{ default: 'wrap' }}\n                          >\n                            {parameterKeys.map(key => (\n                              <FlexItem key={key}>\n                                <Label variant=\"outline\" color=\"blue\">\n                                  {key}\n                                </Label>\n                              </FlexItem>\n                            ))}\n                          </Flex>\n                        </FlexItem>\n                      </Flex>\n                    </DescriptionListDescription>\n                  </DescriptionListGroup>\n                )}\n\n                {/* Response Section */}\n                {toolCall.response && (\n                  <DescriptionListGroup\n                    style={\n                      {\n                        '--pf-v6-c-description-list__group--RowGap':\n                          'var(--pf-t--global--spacer--xs)',\n                      } as any\n                    }\n                  >\n                    {/* <DescriptionListTerm> */}\n                    <Flex\n                      alignItems={{ default: 'alignItemsCenter' }}\n                      justifyContent={{ default: 'justifyContentSpaceBetween' }}\n                    >\n                      <FlexItem flex={{ default: 'flex_1' }}>\n                        <strong> {t('toolCall.response')}</strong>\n                      </FlexItem>\n                    </Flex>\n                    {/* </DescriptionListTerm> */}\n                    <DescriptionListDescription\n                      style={{ marginInlineStart: 0 }}\n                    >\n                      <Flex\n                        direction={{ default: 'column' }}\n                        spaceItems={{ default: 'spaceItemsXs' }}\n                      >\n                        <FlexItem className={classes.codeBlock}>\n                          <Message\n                            content={formatToolResponseForMarkdown(\n                              toolCall.response,\n                            )}\n                            role={role}\n                            codeBlockProps={{\n                              isExpandable: true,\n                              expandableSectionProps: {\n                                truncateMaxLines: 12,\n                              },\n                            }}\n                          />\n                        </FlexItem>\n                      </Flex>\n                    </DescriptionListDescription>\n                  </DescriptionListGroup>\n                )}\n              </DescriptionList>\n            </FlexItem>\n          </Flex>\n        </div>\n      </FlexItem>\n    </Flex>\n  );\n};\n\nexport default ToolCallContent;\n"],"names":[],"mappings":"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"}

package/dist/components/Trans.esm.js

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { cloneElement } from 'react';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+
+const Trans = ({ message, params, components }) => {
+  const { t } = useTranslation();
+  const translatedText = t(message, params || {});
+  if (!components) {
+    return /* @__PURE__ */ jsx(Fragment, { children: translatedText });
+  }
+  let result = translatedText;
+  const markers = {};
+  let markerIndex = 0;
+  for (const [placeholder, component] of Object.entries(components)) {
+    const marker = `__MARKER_${markerIndex}__`;
+    markers[marker] = component;
+    result = result.replace(new RegExp(escapeRegExp(placeholder), "g"), marker);
+    markerIndex++;
+  }
+  const parts = result.split(/(__MARKER_\d+__)/);
+  return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, index) => {
+    if (markers[part]) {
+      return cloneElement(markers[part], { key: index });
+    }
+    return part;
+  }) });
+};
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export { Trans };
+//# sourceMappingURL=Trans.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trans.esm.js","sources":["../../src/components/Trans.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 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 */\n\nimport { cloneElement } from 'react';\n\nimport { useTranslation } from '../hooks/useTranslation';\n\ninterface TransProps {\n  message: string;\n  params?: Record<string, any>;\n  components?: Record<string, React.ReactElement>;\n}\n\nexport const Trans = ({ message, params, components }: TransProps) => {\n  const { t } = useTranslation();\n  const translatedText = t(message as any, params || {});\n\n  // If no components are provided, just return the text\n  if (!components) {\n    return <>{translatedText}</>;\n  }\n\n  // Simple string replacement approach - no regex, no security risks\n  let result = translatedText;\n\n  // Replace each placeholder with a unique marker\n  const markers: Record<string, React.ReactElement> = {};\n  let markerIndex = 0;\n\n  for (const [placeholder, component] of Object.entries(components)) {\n    const marker = `__MARKER_${markerIndex}__`;\n    markers[marker] = component;\n    result = result.replace(new RegExp(escapeRegExp(placeholder), 'g'), marker);\n    markerIndex++;\n  }\n\n  // Split by markers and render components\n  const parts = result.split(/(__MARKER_\\d+__)/);\n\n  return (\n    <>\n      {parts.map((part: string, index: number) => {\n        if (markers[part]) {\n          return cloneElement(markers[part], { key: index });\n        }\n        return part;\n      })}\n    </>\n  );\n};\n\n// Helper function to escape special regex characters\nfunction escapeRegExp(string: string): string {\n  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n"],"names":[],"mappings":";;;;AA2BO,MAAM,QAAQ,CAAC,EAAE,OAAA,EAAS,MAAA,EAAQ,YAAW,KAAkB;AACpE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,cAAA,EAAe;AAC7B,EAAA,MAAM,cAAA,GAAiB,CAAA,CAAE,OAAA,EAAgB,MAAA,IAAU,EAAE,CAAA;AAGrD,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uCAAU,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,EAC3B;AAGA,EAAA,IAAI,MAAA,GAAS,cAAA;AAGb,EAAA,MAAM,UAA8C,EAAC;AACrD,EAAA,IAAI,WAAA,GAAc,CAAA;AAElB,EAAA,KAAA,MAAW,CAAC,WAAA,EAAa,SAAS,KAAK,MAAA,CAAO,OAAA,CAAQ,UAAU,CAAA,EAAG;AACjE,IAAA,MAAM,MAAA,GAAS,YAAY,WAAW,CAAA,EAAA,CAAA;AACtC,IAAA,OAAA,CAAQ,MAAM,CAAA,GAAI,SAAA;AAClB,IAAA,MAAA,GAAS,MAAA,CAAO,QAAQ,IAAI,MAAA,CAAO,aAAa,WAAW,CAAA,EAAG,GAAG,CAAA,EAAG,MAAM,CAAA;AAC1E,IAAA,WAAA,EAAA;AAAA,EACF;AAGA,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,kBAAkB,CAAA;AAE7C,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAc,KAAA,KAAkB;AAC1C,IAAA,IAAI,OAAA,CAAQ,IAAI,CAAA,EAAG;AACjB,MAAA,OAAO,aAAa,OAAA,CAAQ,IAAI,GAAG,EAAE,GAAA,EAAK,OAAO,CAAA;AAAA,IACnD;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAC,CAAA,EACH,CAAA;AAEJ;AAGA,SAAS,aAAa,MAAA,EAAwB;AAC5C,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,qBAAA,EAAuB,MAAM,CAAA;AACrD;;;;"}