@red-hat-developer-hub/backstage-plugin-lightspeed 0.5.7 → 0.6.0

package/dist/components/LightspeedChatBox.esm.js

@@ -1,12 +1,13 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle, useEffect, Fragment } from 'react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core';
 import { MessageBox, ChatbotWelcomePrompt, Message } from '@patternfly/chatbot';
 import { Alert } from '@patternfly/react-core';
-import { FUNCTION_DISCLAIMER, FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION } from '../const.esm.js';
 import { useAutoScroll } from '../hooks/useAutoScroll.esm.js';
 import { useBufferedMessages } from '../hooks/useBufferedMessages.esm.js';
 import { useFeedbackActions } from '../hooks/useFeedbackActions.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   prompt: {
@@ -28,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
     }
   }
 }));
-const LightspeedChatBox = React__default.forwardRef(
+const LightspeedChatBox = forwardRef(
   ({
     userName,
     messages,
@@ -39,8 +40,9 @@ const LightspeedChatBox = React__default.forwardRef(
     isStreaming
   }, ref) => {
     const classes = useStyles();
-    const scrollQueued = React__default.useRef(false);
-    const containerRef = React__default.useRef(null);
+    const scrollQueued = useRef(false);
+    const containerRef = useRef(null);
+    const { t } = useTranslation();
     const configApi = useApi(configApiRef);
     const questionValidationEnabled = configApi.getOptionalBoolean("lightspeed.questionValidation") ?? true;
     const cmessages = useBufferedMessages(messages, 30);
@@ -50,7 +52,7 @@ const LightspeedChatBox = React__default.forwardRef(
       conversationId,
       isStreaming
     );
-    React__default.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       scrollToBottom: () => {
         if (scrollQueued.current) return;
         scrollQueued.current = true;
@@ -60,7 +62,7 @@ const LightspeedChatBox = React__default.forwardRef(
         });
       }
     }));
-    React__default.useEffect(() => {
+    useEffect(() => {
       if (!autoScroll || scrollQueued.current) return undefined;
       scrollQueued.current = true;
       const rafId = requestAnimationFrame(() => {
@@ -80,39 +82,46 @@ const LightspeedChatBox = React__default.forwardRef(
       };
     }, [autoScroll, cmessages, containerRef]);
     const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsxs(
       MessageBox,
       {
         className: welcomePrompts.length ? `${messageBoxClasses} ${classes.prompt}` : messageBoxClasses,
         announcement,
         ref: containerRef,
         onScrollToTopClick: scrollToTop,
-        onScrollToBottomClick: scrollToBottom
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
-        Alert,
-        {
-          title: "Important",
-          variant: "info",
-          isInline: true,
-          className: classes.alert
-        },
-        questionValidationEnabled ? FUNCTION_DISCLAIMER : FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION
-      ), /* @__PURE__ */ React__default.createElement("br", null)),
-      welcomePrompts.length ? /* @__PURE__ */ React__default.createElement(
-        ChatbotWelcomePrompt,
-        {
-          title: `Hello, ${profileLoading ? "..." : userName ?? "Guest"}`,
-          description: "How can I help you today?",
-          prompts: welcomePrompts
-        }
-      ) : /* @__PURE__ */ React__default.createElement("br", null),
-      conversationMessages.map((message, index) => {
-        if (index === cmessages.length - 1) {
-          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${message.role}-${index}` }, /* @__PURE__ */ React__default.createElement(Message, { key: `${message.role}-${index}`, ...message }));
-        }
-        return /* @__PURE__ */ React__default.createElement(Message, { key: `${message.role}-${index}`, ...message });
-      })
+        onScrollToBottomClick: scrollToBottom,
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              Alert,
+              {
+                title: t("aria.important"),
+                variant: "info",
+                isInline: true,
+                className: classes.alert,
+                children: questionValidationEnabled ? t("disclaimer.withValidation") : t("disclaimer.withoutValidation")
+              }
+            ),
+            /* @__PURE__ */ jsx("br", {})
+          ] }),
+          welcomePrompts.length ? /* @__PURE__ */ jsx(
+            ChatbotWelcomePrompt,
+            {
+              title: t("chatbox.welcome.greeting", {
+                userName: profileLoading ? t("user.loading") : userName ?? t("user.guest")
+              }),
+              description: t("chatbox.welcome.description"),
+              prompts: welcomePrompts
+            }
+          ) : /* @__PURE__ */ jsx("br", {}),
+          conversationMessages.map((message, index) => {
+            if (index === cmessages.length - 1) {
+              return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Message, { ...message }, `${message.role}-${index}`) }, `${message.role}-${index}`);
+            }
+            return /* @__PURE__ */ jsx(Message, { ...message }, `${message.role}-${index}`);
+          })
+        ]
+      }
     );
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"LightspeedChatBox.esm.js","sources":["../../src/components/LightspeedChatBox.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 React from 'react';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { makeStyles } from '@material-ui/core';\nimport {\n  ChatbotWelcomePrompt,\n  Message,\n  MessageBox,\n  MessageBoxHandle,\n  MessageProps,\n  WelcomePrompt,\n} from '@patternfly/chatbot';\nimport { Alert } from '@patternfly/react-core';\n\nimport {\n  FUNCTION_DISCLAIMER,\n  FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION,\n} from '../const';\nimport { useAutoScroll } from '../hooks/useAutoScroll';\nimport { useBufferedMessages } from '../hooks/useBufferedMessages';\nimport { useFeedbackActions } from '../hooks/useFeedbackActions';\n\nconst useStyles = makeStyles(theme => ({\n  prompt: {\n    'justify-content': 'flex-end',\n  },\n  container: {\n    maxWidth: 'unset !important',\n  },\n  alert: {\n    background: 'unset !important',\n  },\n  userMessageText: {\n    '& div.pf-chatbot__message--user': {\n      '& div.pf-chatbot__message-text': {\n        '& p': {\n          color: theme.palette.common.white,\n        },\n      },\n    },\n  },\n}));\n\ntype LightspeedChatBoxProps = {\n  userName?: string;\n  messages: MessageProps[];\n  profileLoading: boolean;\n  announcement: string | undefined;\n  welcomePrompts: WelcomePrompt[];\n  conversationId: string;\n  isStreaming: boolean;\n};\n\nexport interface ScrollContainerHandle {\n  scrollToBottom: () => void;\n}\n\nexport const LightspeedChatBox = React.forwardRef(\n  (\n    {\n      userName,\n      messages,\n      announcement,\n      conversationId,\n      profileLoading,\n      welcomePrompts,\n      isStreaming,\n    }: LightspeedChatBoxProps,\n    ref: React.ForwardedRef<ScrollContainerHandle>,\n  ) => {\n    const classes = useStyles();\n    const scrollQueued = React.useRef(false);\n    const containerRef = React.useRef<MessageBoxHandle>(null);\n\n    const configApi = useApi(configApiRef);\n    const questionValidationEnabled =\n      configApi.getOptionalBoolean('lightspeed.questionValidation') ?? true;\n    const cmessages = useBufferedMessages(messages, 30);\n    const { autoScroll, scrollToBottom, scrollToTop } =\n      useAutoScroll(containerRef);\n    const conversationMessages = useFeedbackActions(\n      cmessages,\n      conversationId,\n      isStreaming,\n    );\n\n    React.useImperativeHandle(ref, () => ({\n      scrollToBottom: () => {\n        if (scrollQueued.current) return;\n        scrollQueued.current = true;\n\n        requestAnimationFrame(() => {\n          scrollToBottom();\n          scrollQueued.current = false;\n        });\n      },\n    }));\n\n    // Auto-scrolls to the latest message\n    React.useEffect(() => {\n      if (!autoScroll || scrollQueued.current) return undefined;\n\n      scrollQueued.current = true;\n\n      const rafId = requestAnimationFrame(() => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        setTimeout(() => {\n          container.scrollTo({\n            top: container.scrollHeight,\n            behavior: 'auto',\n          });\n        }, 0);\n\n        scrollQueued.current = false;\n      });\n\n      return () => {\n        cancelAnimationFrame(rafId);\n        scrollQueued.current = false;\n      };\n\n      // eslint-disable-next-line\n    }, [autoScroll, cmessages, containerRef]);\n\n    const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;\n    return (\n      <MessageBox\n        className={\n          welcomePrompts.length\n            ? `${messageBoxClasses} ${classes.prompt}`\n            : messageBoxClasses\n        }\n        announcement={announcement}\n        ref={containerRef}\n        onScrollToTopClick={scrollToTop}\n        onScrollToBottomClick={scrollToBottom}\n      >\n        <div>\n          <Alert\n            title=\"Important\"\n            variant=\"info\"\n            isInline\n            className={classes.alert}\n          >\n            {questionValidationEnabled\n              ? FUNCTION_DISCLAIMER\n              : FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION}\n          </Alert>\n          <br />\n        </div>\n        {welcomePrompts.length ? (\n          <ChatbotWelcomePrompt\n            title={`Hello, ${profileLoading ? '...' : (userName ?? 'Guest')}`}\n            description=\"How can I help you today?\"\n            prompts={welcomePrompts}\n          />\n        ) : (\n          <br />\n        )}\n        {conversationMessages.map((message, index) => {\n          if (index === cmessages.length - 1) {\n            return (\n              <React.Fragment key={`${message.role}-${index}`}>\n                <Message key={`${message.role}-${index}`} {...message} />\n              </React.Fragment>\n            );\n          }\n          return <Message key={`${message.role}-${index}`} {...message} />;\n        })}\n      </MessageBox>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"LightspeedChatBox.esm.js","sources":["../../src/components/LightspeedChatBox.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 {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { makeStyles } from '@material-ui/core';\nimport {\n  ChatbotWelcomePrompt,\n  Message,\n  MessageBox,\n  MessageBoxHandle,\n  MessageProps,\n  WelcomePrompt,\n} from '@patternfly/chatbot';\nimport { Alert } from '@patternfly/react-core';\n\nimport { useAutoScroll } from '../hooks/useAutoScroll';\nimport { useBufferedMessages } from '../hooks/useBufferedMessages';\nimport { useFeedbackActions } from '../hooks/useFeedbackActions';\nimport { useTranslation } from '../hooks/useTranslation';\n\nconst useStyles = makeStyles(theme => ({\n  prompt: {\n    'justify-content': 'flex-end',\n  },\n  container: {\n    maxWidth: 'unset !important',\n  },\n  alert: {\n    background: 'unset !important',\n  },\n  userMessageText: {\n    '& div.pf-chatbot__message--user': {\n      '& div.pf-chatbot__message-text': {\n        '& p': {\n          color: theme.palette.common.white,\n        },\n      },\n    },\n  },\n}));\n\ntype LightspeedChatBoxProps = {\n  userName?: string;\n  messages: MessageProps[];\n  profileLoading: boolean;\n  announcement: string | undefined;\n  welcomePrompts: WelcomePrompt[];\n  conversationId: string;\n  isStreaming: boolean;\n};\n\nexport interface ScrollContainerHandle {\n  scrollToBottom: () => void;\n}\n\nexport const LightspeedChatBox = forwardRef(\n  (\n    {\n      userName,\n      messages,\n      announcement,\n      conversationId,\n      profileLoading,\n      welcomePrompts,\n      isStreaming,\n    }: LightspeedChatBoxProps,\n    ref: ForwardedRef<ScrollContainerHandle>,\n  ) => {\n    const classes = useStyles();\n    const scrollQueued = useRef(false);\n    const containerRef = useRef<MessageBoxHandle>(null);\n    const { t } = useTranslation();\n\n    const configApi = useApi(configApiRef);\n    const questionValidationEnabled =\n      configApi.getOptionalBoolean('lightspeed.questionValidation') ?? true;\n    const cmessages = useBufferedMessages(messages, 30);\n    const { autoScroll, scrollToBottom, scrollToTop } =\n      useAutoScroll(containerRef);\n    const conversationMessages = useFeedbackActions(\n      cmessages,\n      conversationId,\n      isStreaming,\n    );\n\n    useImperativeHandle(ref, () => ({\n      scrollToBottom: () => {\n        if (scrollQueued.current) return;\n        scrollQueued.current = true;\n\n        requestAnimationFrame(() => {\n          scrollToBottom();\n          scrollQueued.current = false;\n        });\n      },\n    }));\n\n    // Auto-scrolls to the latest message\n    useEffect(() => {\n      if (!autoScroll || scrollQueued.current) return undefined;\n\n      scrollQueued.current = true;\n\n      const rafId = requestAnimationFrame(() => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        setTimeout(() => {\n          container.scrollTo({\n            top: container.scrollHeight,\n            behavior: 'auto',\n          });\n        }, 0);\n\n        scrollQueued.current = false;\n      });\n\n      return () => {\n        cancelAnimationFrame(rafId);\n        scrollQueued.current = false;\n      };\n\n      // eslint-disable-next-line\n    }, [autoScroll, cmessages, containerRef]);\n\n    const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;\n    return (\n      <MessageBox\n        className={\n          welcomePrompts.length\n            ? `${messageBoxClasses} ${classes.prompt}`\n            : messageBoxClasses\n        }\n        announcement={announcement}\n        ref={containerRef}\n        onScrollToTopClick={scrollToTop}\n        onScrollToBottomClick={scrollToBottom}\n      >\n        <div>\n          <Alert\n            title={t('aria.important')}\n            variant=\"info\"\n            isInline\n            className={classes.alert}\n          >\n            {questionValidationEnabled\n              ? t('disclaimer.withValidation')\n              : t('disclaimer.withoutValidation')}\n          </Alert>\n          <br />\n        </div>\n        {welcomePrompts.length ? (\n          <ChatbotWelcomePrompt\n            title={t('chatbox.welcome.greeting' as any, {\n              userName: profileLoading\n                ? t('user.loading')\n                : (userName ?? t('user.guest')),\n            })}\n            description={t('chatbox.welcome.description')}\n            prompts={welcomePrompts}\n          />\n        ) : (\n          <br />\n        )}\n        {conversationMessages.map((message, index) => {\n          if (index === cmessages.length - 1) {\n            return (\n              <Fragment key={`${message.role}-${index}`}>\n                <Message key={`${message.role}-${index}`} {...message} />\n              </Fragment>\n            );\n          }\n          return <Message key={`${message.role}-${index}`} {...message} />;\n        })}\n      </MessageBox>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/components/LightspeedChatBoxHeader.esm.js

@@ -1,7 +1,9 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { makeStyles, createStyles } from '@material-ui/core';
 import { ChatbotHeaderActions } from '@patternfly/chatbot';
 import { Dropdown, DropdownList, DropdownItem, MenuToggle } from '@patternfly/react-core';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const useStyles = makeStyles(
   () => createStyles({
@@ -18,20 +20,21 @@ const LightspeedChatBoxHeader = ({
   handleSelectedModel,
   models
 }) => {
-  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React__default.useState(false);
+  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
+  const { t } = useTranslation();
   const styles = useStyles();
-  const toggle = (toggleRef) => /* @__PURE__ */ React__default.createElement(
+  const toggle = (toggleRef) => /* @__PURE__ */ jsx(
     MenuToggle,
     {
       variant: "secondary",
-      "aria-label": "Chatbot selector",
+      "aria-label": t("aria.chatbotSelector"),
       ref: toggleRef,
       isExpanded: isOptionsMenuOpen,
-      onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen)
-    },
-    selectedModel
+      onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen),
+      children: selectedModel
+    }
   );
-  return /* @__PURE__ */ React__default.createElement(ChatbotHeaderActions, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(ChatbotHeaderActions, { children: /* @__PURE__ */ jsx(
     Dropdown,
     {
       className: styles.dropdown,
@@ -44,10 +47,10 @@ const LightspeedChatBoxHeader = ({
       popperProps: { position: "right" },
       shouldFocusToggleOnSelect: true,
       shouldFocusFirstItemOnOpen: false,
-      toggle
-    },
-    /* @__PURE__ */ React__default.createElement(DropdownList, null, models.map((m) => /* @__PURE__ */ React__default.createElement(DropdownItem, { value: m.value, key: m.value }, m.label)))
-  ));
+      toggle,
+      children: /* @__PURE__ */ jsx(DropdownList, { children: models.map((m) => /* @__PURE__ */ jsx(DropdownItem, { value: m.value, children: m.label }, m.value)) })
+    }
+  ) });
 };
 
 export { LightspeedChatBoxHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"LightspeedChatBoxHeader.esm.js","sources":["../../src/components/LightspeedChatBoxHeader.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 React from 'react';\n\nimport { createStyles, makeStyles } from '@material-ui/core';\nimport { ChatbotHeaderActions } from '@patternfly/chatbot';\nimport {\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  MenuToggleElement,\n} from '@patternfly/react-core';\n\ntype LightspeedChatBoxHeaderProps = {\n  selectedModel: string;\n  handleSelectedModel: (item: string) => void;\n  models: { label: string; value: string }[];\n};\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    dropdown: {\n      '& ul, & li': {\n        padding: 0,\n        margin: 0,\n      },\n    },\n  }),\n);\n\nexport const LightspeedChatBoxHeader = ({\n  selectedModel,\n  handleSelectedModel,\n  models,\n}: LightspeedChatBoxHeaderProps) => {\n  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);\n\n  const styles = useStyles();\n\n  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (\n    <MenuToggle\n      variant=\"secondary\"\n      aria-label=\"Chatbot selector\"\n      ref={toggleRef}\n      isExpanded={isOptionsMenuOpen}\n      onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}\n    >\n      {selectedModel}\n    </MenuToggle>\n  );\n\n  return (\n    <ChatbotHeaderActions>\n      <Dropdown\n        className={styles.dropdown}\n        isOpen={isOptionsMenuOpen}\n        onSelect={(_e, value) => {\n          handleSelectedModel(value as string);\n          setIsOptionsMenuOpen(false);\n        }}\n        onOpenChange={isOpen => setIsOptionsMenuOpen(isOpen)}\n        popperProps={{ position: 'right' }}\n        shouldFocusToggleOnSelect\n        shouldFocusFirstItemOnOpen={false}\n        toggle={toggle}\n      >\n        <DropdownList>\n          {models.map(m => (\n            <DropdownItem value={m.value} key={m.value}>\n              {m.label}\n            </DropdownItem>\n          ))}\n        </DropdownList>\n      </Dropdown>\n    </ChatbotHeaderActions>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAkCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,MAC3B,YAAa,CAAA;AAAA,IACX,QAAU,EAAA;AAAA,MACR,YAAc,EAAA;AAAA,QACZ,OAAS,EAAA,CAAA;AAAA,QACT,MAAQ,EAAA;AAAA;AACV;AACF,GACD;AACH,CAAA;AAEO,MAAM,0BAA0B,CAAC;AAAA,EACtC,aAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,CAAC,iBAAmB,EAAA,oBAAoB,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA;AAEtE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAM,MAAA,MAAA,GAAS,CAAC,SACd,qBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,YAAW,EAAA,kBAAA;AAAA,MACX,GAAK,EAAA,SAAA;AAAA,MACL,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAS,EAAA,MAAM,oBAAqB,CAAA,CAAC,iBAAiB;AAAA,KAAA;AAAA,IAErD;AAAA,GACH;AAGF,EAAA,oDACG,oBACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,MAAQ,EAAA,iBAAA;AAAA,MACR,QAAA,EAAU,CAAC,EAAA,EAAI,KAAU,KAAA;AACvB,QAAA,mBAAA,CAAoB,KAAe,CAAA;AACnC,QAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,OAC5B;AAAA,MACA,YAAA,EAAc,CAAU,MAAA,KAAA,oBAAA,CAAqB,MAAM,CAAA;AAAA,MACnD,WAAA,EAAa,EAAE,QAAA,EAAU,OAAQ,EAAA;AAAA,MACjC,yBAAyB,EAAA,IAAA;AAAA,MACzB,0BAA4B,EAAA,KAAA;AAAA,MAC5B;AAAA,KAAA;AAAA,iDAEC,YACE,EAAA,IAAA,EAAA,MAAA,CAAO,GAAI,CAAA,CAAA,CAAA,kDACT,YAAa,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,KAAA,EAAO,KAAK,CAAE,CAAA,KAAA,EAAA,EAClC,CAAE,CAAA,KACL,CACD,CACH;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LightspeedChatBoxHeader.esm.js","sources":["../../src/components/LightspeedChatBoxHeader.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 { Ref, useState } from 'react';\n\nimport { createStyles, makeStyles } from '@material-ui/core';\nimport { ChatbotHeaderActions } from '@patternfly/chatbot';\nimport {\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  MenuToggleElement,\n} from '@patternfly/react-core';\n\nimport { useTranslation } from '../hooks/useTranslation';\n\ntype LightspeedChatBoxHeaderProps = {\n  selectedModel: string;\n  handleSelectedModel: (item: string) => void;\n  models: { label: string; value: string }[];\n};\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    dropdown: {\n      '& ul, & li': {\n        padding: 0,\n        margin: 0,\n      },\n    },\n  }),\n);\n\nexport const LightspeedChatBoxHeader = ({\n  selectedModel,\n  handleSelectedModel,\n  models,\n}: LightspeedChatBoxHeaderProps) => {\n  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);\n  const { t } = useTranslation();\n\n  const styles = useStyles();\n\n  const toggle = (toggleRef: Ref<MenuToggleElement>) => (\n    <MenuToggle\n      variant=\"secondary\"\n      aria-label={t('aria.chatbotSelector')}\n      ref={toggleRef}\n      isExpanded={isOptionsMenuOpen}\n      onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}\n    >\n      {selectedModel}\n    </MenuToggle>\n  );\n\n  return (\n    <ChatbotHeaderActions>\n      <Dropdown\n        className={styles.dropdown}\n        isOpen={isOptionsMenuOpen}\n        onSelect={(_e, value) => {\n          handleSelectedModel(value as string);\n          setIsOptionsMenuOpen(false);\n        }}\n        onOpenChange={isOpen => setIsOptionsMenuOpen(isOpen)}\n        popperProps={{ position: 'right' }}\n        shouldFocusToggleOnSelect\n        shouldFocusFirstItemOnOpen={false}\n        toggle={toggle}\n      >\n        <DropdownList>\n          {models.map(m => (\n            <DropdownItem value={m.value} key={m.value}>\n              {m.label}\n            </DropdownItem>\n          ))}\n        </DropdownList>\n      </Dropdown>\n    </ChatbotHeaderActions>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAoCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,MAC3B,YAAa,CAAA;AAAA,IACX,QAAU,EAAA;AAAA,MACR,YAAc,EAAA;AAAA,QACZ,OAAS,EAAA,CAAA;AAAA,QACT,MAAQ,EAAA;AAAA;AACV;AACF,GACD;AACH,CAAA;AAEO,MAAM,0BAA0B,CAAC;AAAA,EACtC,aAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAM,MAAA,MAAA,GAAS,CAAC,SACd,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,YAAA,EAAY,EAAE,sBAAsB,CAAA;AAAA,MACpC,GAAK,EAAA,SAAA;AAAA,MACL,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAS,EAAA,MAAM,oBAAqB,CAAA,CAAC,iBAAiB,CAAA;AAAA,MAErD,QAAA,EAAA;AAAA;AAAA,GACH;AAGF,EAAA,2BACG,oBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,QAAA;AAAA,MAClB,MAAQ,EAAA,iBAAA;AAAA,MACR,QAAA,EAAU,CAAC,EAAA,EAAI,KAAU,KAAA;AACvB,QAAA,mBAAA,CAAoB,KAAe,CAAA;AACnC,QAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,OAC5B;AAAA,MACA,YAAA,EAAc,CAAU,MAAA,KAAA,oBAAA,CAAqB,MAAM,CAAA;AAAA,MACnD,WAAA,EAAa,EAAE,QAAA,EAAU,OAAQ,EAAA;AAAA,MACjC,yBAAyB,EAAA,IAAA;AAAA,MACzB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,MAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACE,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,uBACT,GAAA,CAAA,YAAA,EAAA,EAAa,KAAO,EAAA,CAAA,CAAE,OACpB,QAAE,EAAA,CAAA,CAAA,KAAA,EAAA,EAD8B,CAAE,CAAA,KAErC,CACD,CACH,EAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/LightspeedIcon.esm.js

@@ -1,8 +1,17 @@
-import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 import logo from '../images/logo-white.svg';
 
 const LightspeedIcon = () => {
-  return /* @__PURE__ */ React.createElement("img", { src: logo, alt: "lightspeed icon", style: { height: "25px" } });
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: logo,
+      alt: t("icon.lightspeed.alt"),
+      style: { height: "25px" }
+    }
+  );
 };
 
 export { LightspeedIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"LightspeedIcon.esm.js","sources":["../../src/components/LightspeedIcon.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 * as React from 'react';\n\nimport logo from '../images/logo-white.svg';\n\n/**\n * @public\n * Lightspeed Icon\n */\nexport const LightspeedIcon = () => {\n  return (\n    <img src={logo as any} alt=\"lightspeed icon\" style={{ height: '25px' }} />\n  );\n};\n"],"names":[],"mappings":";;;AAwBO,MAAM,iBAAiB,MAAM;AAClC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAK,IAAa,EAAA,GAAA,EAAI,mBAAkB,KAAO,EAAA,EAAE,MAAQ,EAAA,MAAA,EAAU,EAAA,CAAA;AAE5E;;;;"}
+{"version":3,"file":"LightspeedIcon.esm.js","sources":["../../src/components/LightspeedIcon.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 { useTranslation } from '../hooks/useTranslation';\nimport logo from '../images/logo-white.svg';\n\n/**\n * @public\n * Lightspeed Icon\n */\nexport const LightspeedIcon = () => {\n  const { t } = useTranslation();\n\n  return (\n    <img\n      src={logo as any}\n      alt={t('icon.lightspeed.alt')}\n      style={{ height: '25px' }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAuBO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,IAAA;AAAA,MACL,GAAA,EAAK,EAAE,qBAAqB,CAAA;AAAA,MAC5B,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO;AAAA;AAAA,GAC1B;AAEJ;;;;"}

package/dist/components/LightspeedPage.esm.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
 import { useAsync } from 'react-use';
 import { Page, Header, Content } from '@backstage/core-components';
 import { useApi, identityApiRef } from '@backstage/core-plugin-api';
@@ -6,6 +7,7 @@ import { makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { useAllModels } from '../hooks/useAllModels.esm.js';
 import { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission.esm.js';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 import queryClient from '../utils/queryClient.esm.js';
 import FileAttachmentContextProvider from './AttachmentContext.esm.js';
 import { LightspeedChat } from './LightSpeedChat.esm.js';
@@ -22,6 +24,7 @@ const THEME_DARK = "dark";
 const THEME_DARK_CLASS = "pf-v6-theme-dark";
 const LightspeedPageInner = () => {
   const classes = useStyles();
+  const { t } = useTranslation();
   const {
     palette: { type }
   } = useTheme();
@@ -31,12 +34,12 @@ const LightspeedPageInner = () => {
   const { value: profile, loading: profileLoading } = useAsync(
     async () => await identityApi.getProfileInfo()
   );
-  const [selectedModel, setSelectedModel] = React__default.useState("");
-  const modelsItems = React__default.useMemo(
+  const [selectedModel, setSelectedModel] = useState("");
+  const modelsItems = useMemo(
     () => models ? models.map((m) => ({ label: m.id, value: m.id })) : [],
     [models]
   );
-  React__default.useEffect(() => {
+  useEffect(() => {
     const htmlTagElement = document.documentElement;
     if (type === THEME_DARK) {
       htmlTagElement.classList.add(THEME_DARK_CLASS);
@@ -44,35 +47,38 @@ const LightspeedPageInner = () => {
       htmlTagElement.classList.remove(THEME_DARK_CLASS);
     }
   }, [type]);
-  React__default.useEffect(() => {
+  useEffect(() => {
     if (modelsItems.length > 0) setSelectedModel(modelsItems[0].value);
   }, [modelsItems]);
   if (loading) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React__default.createElement(
-    Header,
-    {
-      title: "Lightspeed",
-      style: { display: "none" },
-      pageTitleOverride: "Developer Lightspeed"
-    }
-  ), /* @__PURE__ */ React__default.createElement(Content, { className: classes.container }, !hasViewAccess ? /* @__PURE__ */ React__default.createElement(PermissionRequiredState, null) : /* @__PURE__ */ React__default.createElement(FileAttachmentContextProvider, null, /* @__PURE__ */ React__default.createElement(
-    LightspeedChat,
-    {
-      selectedModel,
-      handleSelectedModel: (item) => {
-        setSelectedModel(item);
-      },
-      models: modelsItems,
-      userName: profile?.displayName,
-      avatar: profile?.picture,
-      profileLoading
-    }
-  ))));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: t("page.title"),
+        style: { display: "none" },
+        pageTitleOverride: t("page.title")
+      }
+    ),
+    /* @__PURE__ */ jsx(Content, { className: classes.container, children: !hasViewAccess ? /* @__PURE__ */ jsx(PermissionRequiredState, {}) : /* @__PURE__ */ jsx(FileAttachmentContextProvider, { children: /* @__PURE__ */ jsx(
+      LightspeedChat,
+      {
+        selectedModel,
+        handleSelectedModel: (item) => {
+          setSelectedModel(item);
+        },
+        models: modelsItems,
+        userName: profile?.displayName,
+        avatar: profile?.picture,
+        profileLoading
+      }
+    ) }) })
+  ] });
 };
 const LightspeedPage = () => {
-  return /* @__PURE__ */ React__default.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React__default.createElement(LightspeedPageInner, null));
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(LightspeedPageInner, {}) });
 };
 
 export { LightspeedPage };

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

@@ -1 +1 @@
-{"version":3,"file":"LightspeedPage.esm.js","sources":["../../src/components/LightspeedPage.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 React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Content, Header, Page } from '@backstage/core-components';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAllModels } from '../hooks/useAllModels';\nimport { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission';\nimport queryClient from '../utils/queryClient';\nimport FileAttachmentContextProvider from './AttachmentContext';\nimport { LightspeedChat } from './LightSpeedChat';\nimport PermissionRequiredState from './PermissionRequiredState';\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    container: {\n      padding: '0px',\n    },\n  }),\n);\n\nconst THEME_DARK = 'dark';\nconst THEME_DARK_CLASS = 'pf-v6-theme-dark';\n\nconst LightspeedPageInner = () => {\n  const classes = useStyles();\n  const {\n    palette: { type },\n  } = useTheme();\n\n  const identityApi = useApi(identityApiRef);\n\n  const { data: models } = useAllModels();\n  const { allowed: hasViewAccess, loading } = useLightspeedViewPermission();\n\n  const { value: profile, loading: profileLoading } = useAsync(\n    async () => await identityApi.getProfileInfo(),\n  );\n\n  const [selectedModel, setSelectedModel] = React.useState('');\n\n  const modelsItems = React.useMemo(\n    () => (models ? models.map(m => ({ label: m.id, value: m.id })) : []),\n    [models],\n  );\n\n  React.useEffect(() => {\n    const htmlTagElement = document.documentElement;\n    if (type === THEME_DARK) {\n      htmlTagElement.classList.add(THEME_DARK_CLASS);\n    } else {\n      htmlTagElement.classList.remove(THEME_DARK_CLASS);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type]);\n\n  React.useEffect(() => {\n    if (modelsItems.length > 0) setSelectedModel(modelsItems[0].value);\n  }, [modelsItems]);\n\n  if (loading) {\n    return null;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Header\n        title=\"Lightspeed\"\n        style={{ display: 'none' }}\n        pageTitleOverride=\"Developer Lightspeed\"\n      />\n      <Content className={classes.container}>\n        {!hasViewAccess ? (\n          <PermissionRequiredState />\n        ) : (\n          <FileAttachmentContextProvider>\n            <LightspeedChat\n              selectedModel={selectedModel}\n              handleSelectedModel={item => {\n                setSelectedModel(item);\n              }}\n              models={modelsItems}\n              userName={profile?.displayName}\n              avatar={profile?.picture}\n              profileLoading={profileLoading}\n            />\n          </FileAttachmentContextProvider>\n        )}\n      </Content>\n    </Page>\n  );\n};\n\nexport const LightspeedPage = () => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <LightspeedPageInner />\n    </QueryClientProvider>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"LightspeedPage.esm.js","sources":["../../src/components/LightspeedPage.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 { useEffect, useMemo, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Content, Header, Page } from '@backstage/core-components';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAllModels } from '../hooks/useAllModels';\nimport { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission';\nimport { useTranslation } from '../hooks/useTranslation';\nimport queryClient from '../utils/queryClient';\nimport FileAttachmentContextProvider from './AttachmentContext';\nimport { LightspeedChat } from './LightSpeedChat';\nimport PermissionRequiredState from './PermissionRequiredState';\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    container: {\n      padding: '0px',\n    },\n  }),\n);\n\nconst THEME_DARK = 'dark';\nconst THEME_DARK_CLASS = 'pf-v6-theme-dark';\n\nconst LightspeedPageInner = () => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n  const {\n    palette: { type },\n  } = useTheme();\n\n  const identityApi = useApi(identityApiRef);\n\n  const { data: models } = useAllModels();\n  const { allowed: hasViewAccess, loading } = useLightspeedViewPermission();\n\n  const { value: profile, loading: profileLoading } = useAsync(\n    async () => await identityApi.getProfileInfo(),\n  );\n\n  const [selectedModel, setSelectedModel] = useState('');\n\n  const modelsItems = useMemo(\n    () => (models ? models.map(m => ({ label: m.id, value: m.id })) : []),\n    [models],\n  );\n\n  useEffect(() => {\n    const htmlTagElement = document.documentElement;\n    if (type === THEME_DARK) {\n      htmlTagElement.classList.add(THEME_DARK_CLASS);\n    } else {\n      htmlTagElement.classList.remove(THEME_DARK_CLASS);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type]);\n\n  useEffect(() => {\n    if (modelsItems.length > 0) setSelectedModel(modelsItems[0].value);\n  }, [modelsItems]);\n\n  if (loading) {\n    return null;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Header\n        title={t('page.title')}\n        style={{ display: 'none' }}\n        pageTitleOverride={t('page.title')}\n      />\n      <Content className={classes.container}>\n        {!hasViewAccess ? (\n          <PermissionRequiredState />\n        ) : (\n          <FileAttachmentContextProvider>\n            <LightspeedChat\n              selectedModel={selectedModel}\n              handleSelectedModel={item => {\n                setSelectedModel(item);\n              }}\n              models={modelsItems}\n              userName={profile?.displayName}\n              avatar={profile?.picture}\n              profileLoading={profileLoading}\n            />\n          </FileAttachmentContextProvider>\n        )}\n      </Content>\n    </Page>\n  );\n};\n\nexport const LightspeedPage = () => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <LightspeedPageInner />\n    </QueryClientProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PermissionRequiredIcon.esm.js

@@ -1,8 +1,16 @@
-import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 import permissionRequired from '../images/permission-required.svg';
 
 const PermissionRequiredIcon = () => {
-  return /* @__PURE__ */ React.createElement("img", { src: permissionRequired, alt: "permission required icon" });
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: permissionRequired,
+      alt: t("icon.permissionRequired.alt")
+    }
+  );
 };
 
 export { PermissionRequiredIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"PermissionRequiredIcon.esm.js","sources":["../../src/components/PermissionRequiredIcon.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 * as React from 'react';\n\nimport permissionRequired from '../images/permission-required.svg';\n\nexport const PermissionRequiredIcon = () => {\n  return <img src={permissionRequired as any} alt=\"permission required icon\" />;\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,kBAAA,EAA2B,KAAI,0BAA2B,EAAA,CAAA;AAC7E;;;;"}
+{"version":3,"file":"PermissionRequiredIcon.esm.js","sources":["../../src/components/PermissionRequiredIcon.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 { useTranslation } from '../hooks/useTranslation';\nimport permissionRequired from '../images/permission-required.svg';\n\nexport const PermissionRequiredIcon = () => {\n  const { t } = useTranslation();\n\n  return (\n    <img\n      src={permissionRequired as any}\n      alt={t('icon.permissionRequired.alt')}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,yBAAyB,MAAM;AAC1C,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,kBAAA;AAAA,MACL,GAAA,EAAK,EAAE,6BAA6B;AAAA;AAAA,GACtC;AAEJ;;;;"}

package/dist/components/PermissionRequiredState.esm.js

@@ -1,9 +1,11 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { EmptyState } from '@backstage/core-components';
 import { Typography, Button } from '@material-ui/core';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { PermissionRequiredIcon } from './PermissionRequiredIcon.esm.js';
+import { Trans } from './Trans.esm.js';
 
 const useStyles = makeStyles(
   () => createStyles({
@@ -17,25 +19,37 @@ const useStyles = makeStyles(
 );
 const PermissionRequiredState = () => {
   const classes = useStyles();
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes.permissionError }, /* @__PURE__ */ React__default.createElement(
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: classes.permissionError, children: /* @__PURE__ */ jsx(
     EmptyState,
     {
-      title: "Missing permissions",
-      description: /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, "To view lightspeed plugin, contact your administrator to give the", " ", /* @__PURE__ */ React__default.createElement("b", null, "lightspeed.chat.read"), " and ", /* @__PURE__ */ React__default.createElement("b", null, "lightspeed.chat.create"), " ", "permissions."),
-      missing: { customImage: /* @__PURE__ */ React__default.createElement(PermissionRequiredIcon, null) },
-      action: /* @__PURE__ */ React__default.createElement(
+      title: t("permission.required.title"),
+      description: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: /* @__PURE__ */ jsx(
+        Trans,
+        {
+          message: "permission.required.description",
+          components: {
+            "<b>lightspeed.chat.read</b>": /* @__PURE__ */ jsx("b", { children: "lightspeed.chat.read" }),
+            "<b>lightspeed.chat.create</b>": /* @__PURE__ */ jsx("b", { children: "lightspeed.chat.create" })
+          }
+        }
+      ) }),
+      missing: { customImage: /* @__PURE__ */ jsx(PermissionRequiredIcon, {}) },
+      action: /* @__PURE__ */ jsxs(
         Button,
         {
           variant: "outlined",
           color: "primary",
           target: "_blank",
-          href: "https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/lightspeed/plugins/lightspeed/README.md#permission-framework-support"
-        },
-        "Read more \xA0 ",
-        /* @__PURE__ */ React__default.createElement(OpenInNewIcon, null)
+          href: "https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/lightspeed/plugins/lightspeed/README.md#permission-framework-support",
+          children: [
+            "Read more \xA0 ",
+            /* @__PURE__ */ jsx(OpenInNewIcon, {})
+          ]
+        }
       )
     }
-  ));
+  ) });
 };
 
 export { PermissionRequiredState as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PermissionRequiredState.esm.js","sources":["../../src/components/PermissionRequiredState.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 React from 'react';\n\nimport { EmptyState } from '@backstage/core-components';\n\nimport { Button, Typography } from '@material-ui/core';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew';\n\nimport { PermissionRequiredIcon } from './PermissionRequiredIcon';\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    permissionError: {\n      display: 'flex',\n      height: '100%',\n      alignItems: 'center',\n      padding: '100px',\n    },\n  }),\n);\n\nconst PermissionRequiredState = () => {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.permissionError}>\n      <EmptyState\n        title=\"Missing permissions\"\n        description={\n          <Typography variant=\"subtitle1\">\n            To view lightspeed plugin, contact your administrator to give the{' '}\n            <b>lightspeed.chat.read</b> and <b>lightspeed.chat.create</b>{' '}\n            permissions.\n          </Typography>\n        }\n        missing={{ customImage: <PermissionRequiredIcon /> }}\n        action={\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            target=\"_blank\"\n            href=\"https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/lightspeed/plugins/lightspeed/README.md#permission-framework-support\"\n          >\n            Read more &nbsp; <OpenInNewIcon />\n          </Button>\n        }\n      />\n    </div>\n  );\n};\nexport default PermissionRequiredState;\n"],"names":["React"],"mappings":";;;;;;;AA0BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,MAC3B,YAAa,CAAA;AAAA,IACX,eAAiB,EAAA;AAAA,MACf,OAAS,EAAA,MAAA;AAAA,MACT,MAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA;AAAA;AACX,GACD;AACH,CAAA;AAEA,MAAM,0BAA0B,MAAM;AACpC,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,eACtB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,qBAAA;AAAA,MACN,6BACGA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,WAAA,EAAA,EAAY,qEACoC,GAClE,kBAAAA,cAAA,CAAA,aAAA,CAAC,GAAE,EAAA,IAAA,EAAA,sBAAoB,GAAI,OAAK,kBAAAA,cAAA,CAAA,aAAA,CAAC,WAAE,wBAAsB,CAAA,EAAK,KAAI,cAEpE,CAAA;AAAA,MAEF,OAAS,EAAA,EAAE,WAAa,kBAAAA,cAAA,CAAA,aAAA,CAAC,4BAAuB,CAAG,EAAA;AAAA,MACnD,MACE,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,UAAA;AAAA,UACR,KAAM,EAAA,SAAA;AAAA,UACN,MAAO,EAAA,QAAA;AAAA,UACP,IAAK,EAAA;AAAA,SAAA;AAAA,QACN,iBAAA;AAAA,qDACmB,aAAc,EAAA,IAAA;AAAA;AAClC;AAAA,GAGN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PermissionRequiredState.esm.js","sources":["../../src/components/PermissionRequiredState.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 { EmptyState } from '@backstage/core-components';\n\nimport { Button, Typography } from '@material-ui/core';\nimport { createStyles, makeStyles } from '@material-ui/core/styles';\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { PermissionRequiredIcon } from './PermissionRequiredIcon';\nimport { Trans } from './Trans';\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    permissionError: {\n      display: 'flex',\n      height: '100%',\n      alignItems: 'center',\n      padding: '100px',\n    },\n  }),\n);\n\nconst PermissionRequiredState = () => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  return (\n    <div className={classes.permissionError}>\n      <EmptyState\n        title={t('permission.required.title')}\n        description={\n          <Typography variant=\"subtitle1\">\n            <Trans\n              message=\"permission.required.description\"\n              components={{\n                '<b>lightspeed.chat.read</b>': <b>lightspeed.chat.read</b>,\n                '<b>lightspeed.chat.create</b>': <b>lightspeed.chat.create</b>,\n              }}\n            />\n          </Typography>\n        }\n        missing={{ customImage: <PermissionRequiredIcon /> }}\n        action={\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            target=\"_blank\"\n            href=\"https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/lightspeed/plugins/lightspeed/README.md#permission-framework-support\"\n          >\n            Read more &nbsp; <OpenInNewIcon />\n          </Button>\n        }\n      />\n    </div>\n  );\n};\nexport default PermissionRequiredState;\n"],"names":[],"mappings":";;;;;;;;;AA0BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,MAC3B,YAAa,CAAA;AAAA,IACX,eAAiB,EAAA;AAAA,MACf,OAAS,EAAA,MAAA;AAAA,MACT,MAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA;AAAA;AACX,GACD;AACH,CAAA;AAEA,MAAM,0BAA0B,MAAM;AACpC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,eACtB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,2BAA2B,CAAA;AAAA,MACpC,WACE,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,iCAAA;AAAA,UACR,UAAY,EAAA;AAAA,YACV,6BAAA,kBAAgC,GAAA,CAAA,GAAA,EAAA,EAAE,QAAoB,EAAA,sBAAA,EAAA,CAAA;AAAA,YACtD,+BAAA,kBAAkC,GAAA,CAAA,GAAA,EAAA,EAAE,QAAsB,EAAA,wBAAA,EAAA;AAAA;AAC5D;AAAA,OAEJ,EAAA,CAAA;AAAA,MAEF,OAAS,EAAA,EAAE,WAAa,kBAAA,GAAA,CAAC,0BAAuB,CAAG,EAAA;AAAA,MACnD,MACE,kBAAA,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,UAAA;AAAA,UACR,KAAM,EAAA,SAAA;AAAA,UACN,MAAO,EAAA,QAAA;AAAA,UACP,IAAK,EAAA,4IAAA;AAAA,UACN,QAAA,EAAA;AAAA,YAAA,iBAAA;AAAA,gCACmB,aAAc,EAAA,EAAA;AAAA;AAAA;AAAA;AAClC;AAAA,GAGN,EAAA,CAAA;AAEJ;;;;"}

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,OAAS,EAAA,MAAA,EAAQ,YAA6B,KAAA;AACpE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,cAAiB,GAAA,CAAA,CAAE,OAAgB,EAAA,MAAA,IAAU,EAAE,CAAA;AAGrD,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,uCAAU,QAAe,EAAA,cAAA,EAAA,CAAA;AAAA;AAI3B,EAAA,IAAI,MAAS,GAAA,cAAA;AAGb,EAAA,MAAM,UAA8C,EAAC;AACrD,EAAA,IAAI,WAAc,GAAA,CAAA;AAElB,EAAA,KAAA,MAAW,CAAC,WAAa,EAAA,SAAS,KAAK,MAAO,CAAA,OAAA,CAAQ,UAAU,CAAG,EAAA;AACjE,IAAM,MAAA,MAAA,GAAS,YAAY,WAAW,CAAA,EAAA,CAAA;AACtC,IAAA,OAAA,CAAQ,MAAM,CAAI,GAAA,SAAA;AAClB,IAAS,MAAA,GAAA,MAAA,CAAO,QAAQ,IAAI,MAAA,CAAO,aAAa,WAAW,CAAA,EAAG,GAAG,CAAA,EAAG,MAAM,CAAA;AAC1E,IAAA,WAAA,EAAA;AAAA;AAIF,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,KAAA,CAAM,kBAAkB,CAAA;AAE7C,EAAA,uBAEK,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,MAAc,KAAkB,KAAA;AAC1C,IAAI,IAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AACjB,MAAA,OAAO,aAAa,OAAQ,CAAA,IAAI,GAAG,EAAE,GAAA,EAAK,OAAO,CAAA;AAAA;AAEnD,IAAO,OAAA,IAAA;AAAA,GACR,CACH,EAAA,CAAA;AAEJ;AAGA,SAAS,aAAa,MAAwB,EAAA;AAC5C,EAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,qBAAA,EAAuB,MAAM,CAAA;AACrD;;;;"}