@red-hat-developer-hub/backstage-plugin-lightspeed 2.6.7 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 ## @red-hat-developer-hub/backstage-plugin-lightspeed
 
+## 2.7.0
+
+### Minor Changes
+
+- 41c1901: Implemented fullscreen chat UX updates including:
+  - Collapsible history panel with new expand/collapse icons
+  - Redesigned message bar with inline model selector and attachment menu
+  - New collapsed history strip with quick new chat functionality
+  - Updated header with Lightspeed logo
+  - Improved conversation list with hover-only options menu
+
+### Patch Changes
+
+- @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.7.0
+
+## 2.6.8
+
+### Patch Changes
+
+- @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.6.8
+
 ## 2.6.7
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -155,6 +155,9 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "tooltip.send": string;
     readonly "tooltip.microphone.active": string;
     readonly "tooltip.microphone.inactive": string;
+    readonly "tooltip.expandHistoryPanel": string;
+    readonly "tooltip.collapseHistoryPanel": string;
+    readonly "tooltip.quickNewChat": string;
     readonly "button.newChat": string;
     readonly "tooltip.chatHistoryMenu": string;
     readonly "tooltip.responseRecorded": string;
@@ -164,6 +167,10 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "tooltip.close": string;
     readonly "tooltip.fab.open": string;
     readonly "tooltip.fab.close": string;
+    readonly "attach.menu.title": string;
+    readonly "attach.menu.description": string;
+    readonly "history.section.pinned": string;
+    readonly "history.section.recent": string;
     readonly "modal.title.preview": string;
     readonly "modal.title.edit": string;
     readonly "icon.lightspeed.alt": string;

package/dist/components/CollapsedHistoryStrip.esm.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import { Tooltip, Button } from '@patternfly/react-core';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { SidebarExpandIcon } from './notebooks/SidebarCollapseIcon.esm.js';
+
+const EditSquareIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { verticalAlign: "middle" },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H14L12 5H5V19H19V12L21 10V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM16.175 5.775L17.6 7.2L12 12.8V14H13.2L18.8 8.4L20.225 9.825L14.275 15.775C14.1083 15.9417 13.9167 16.0667 13.7 16.15C13.4833 16.2333 13.2583 16.275 13.025 16.275H11C10.7167 16.275 10.4792 16.1792 10.2875 15.9875C10.0958 15.7958 10 15.5583 10 15.275V13.25C10 13.0167 10.0417 12.7917 10.125 12.575C10.2083 12.3583 10.3333 12.1667 10.5 12L16.175 5.775ZM20.225 9.825L16.175 5.775L18.175 3.775C18.5583 3.39167 19.0292 3.2 19.5875 3.2C20.1458 3.2 20.6167 3.39167 21 3.775L22.225 5C22.6083 5.38333 22.8 5.85417 22.8 6.4125C22.8 6.97083 22.6083 7.44167 22.225 7.825L20.225 9.825Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+const useStyles = makeStyles((theme) => ({
+  strip: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingTop: theme.spacing(1.5),
+    gap: theme.spacing(1.5),
+    borderRight: "1px solid var(--pf-t--global--border--color--default)",
+    width: 48,
+    minWidth: 48,
+    flexShrink: 0,
+    backgroundColor: "var(--pf-t--global--background--color--primary--default)",
+    height: "100%"
+  },
+  iconButton: {
+    padding: 8,
+    minWidth: 0,
+    lineHeight: 1,
+    borderRadius: "50%",
+    color: "var(--pf-t--global--icon--color--regular)",
+    "&:hover": {
+      color: "var(--pf-t--global--icon--color--hover)",
+      backgroundColor: "var(--pf-t--global--background--color--action--plain--hover)"
+    }
+  },
+  newChatIconButton: {
+    padding: 0,
+    minWidth: 0,
+    lineHeight: 1,
+    color: "var(--pf-t--global--color--brand--default)",
+    "&:hover": {
+      color: "var(--pf-t--global--color--brand--hover)"
+    }
+  }
+}));
+const CollapsedHistoryStrip = ({
+  onExpand,
+  onNewChat,
+  newChatDisabled = false
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: classes.strip, children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: t("tooltip.expandHistoryPanel"), position: "right", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "plain",
+        className: classes.iconButton,
+        onClick: onExpand,
+        "aria-label": t("tooltip.expandHistoryPanel"),
+        children: /* @__PURE__ */ jsx(SidebarExpandIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: t("tooltip.quickNewChat"), position: "right", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "plain",
+        className: classes.newChatIconButton,
+        onClick: onNewChat,
+        "aria-label": t("tooltip.quickNewChat"),
+        isDisabled: newChatDisabled,
+        children: /* @__PURE__ */ jsx(EditSquareIcon, {})
+      }
+    ) })
+  ] });
+};
+
+export { CollapsedHistoryStrip, EditSquareIcon };
+//# sourceMappingURL=CollapsedHistoryStrip.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsedHistoryStrip.esm.js","sources":["../../src/components/CollapsedHistoryStrip.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 { Button, Tooltip } from '@patternfly/react-core';\n\nimport { useTranslation } from '../hooks/useTranslation';\nimport { SidebarExpandIcon } from './notebooks/SidebarCollapseIcon';\n\ntype IconProps = {\n  className?: string;\n};\n\nexport const EditSquareIcon = ({ className }: IconProps) => (\n  <svg\n    className={className}\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style={{ verticalAlign: 'middle' }}\n  >\n    <path\n      d=\"M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H14L12 5H5V19H19V12L21 10V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM16.175 5.775L17.6 7.2L12 12.8V14H13.2L18.8 8.4L20.225 9.825L14.275 15.775C14.1083 15.9417 13.9167 16.0667 13.7 16.15C13.4833 16.2333 13.2583 16.275 13.025 16.275H11C10.7167 16.275 10.4792 16.1792 10.2875 15.9875C10.0958 15.7958 10 15.5583 10 15.275V13.25C10 13.0167 10.0417 12.7917 10.125 12.575C10.2083 12.3583 10.3333 12.1667 10.5 12L16.175 5.775ZM20.225 9.825L16.175 5.775L18.175 3.775C18.5583 3.39167 19.0292 3.2 19.5875 3.2C20.1458 3.2 20.6167 3.39167 21 3.775L22.225 5C22.6083 5.38333 22.8 5.85417 22.8 6.4125C22.8 6.97083 22.6083 7.44167 22.225 7.825L20.225 9.825Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst useStyles = makeStyles(theme => ({\n  strip: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    paddingTop: theme.spacing(1.5),\n    gap: theme.spacing(1.5),\n    borderRight: '1px solid var(--pf-t--global--border--color--default)',\n    width: 48,\n    minWidth: 48,\n    flexShrink: 0,\n    backgroundColor: 'var(--pf-t--global--background--color--primary--default)',\n    height: '100%',\n  },\n  iconButton: {\n    padding: 8,\n    minWidth: 0,\n    lineHeight: 1,\n    borderRadius: '50%',\n    color: 'var(--pf-t--global--icon--color--regular)',\n    '&:hover': {\n      color: 'var(--pf-t--global--icon--color--hover)',\n      backgroundColor:\n        'var(--pf-t--global--background--color--action--plain--hover)',\n    },\n  },\n  newChatIconButton: {\n    padding: 0,\n    minWidth: 0,\n    lineHeight: 1,\n    color: 'var(--pf-t--global--color--brand--default)',\n    '&:hover': {\n      color: 'var(--pf-t--global--color--brand--hover)',\n    },\n  },\n}));\n\ntype CollapsedHistoryStripProps = {\n  onExpand: () => void;\n  onNewChat: () => void;\n  newChatDisabled?: boolean;\n};\n\nexport const CollapsedHistoryStrip = ({\n  onExpand,\n  onNewChat,\n  newChatDisabled = false,\n}: CollapsedHistoryStripProps) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  return (\n    <div className={classes.strip}>\n      <Tooltip content={t('tooltip.expandHistoryPanel')} position=\"right\">\n        <Button\n          variant=\"plain\"\n          className={classes.iconButton}\n          onClick={onExpand}\n          aria-label={t('tooltip.expandHistoryPanel')}\n        >\n          <SidebarExpandIcon />\n        </Button>\n      </Tooltip>\n      <Tooltip content={t('tooltip.quickNewChat')} position=\"right\">\n        <Button\n          variant=\"plain\"\n          className={classes.newChatIconButton}\n          onClick={onNewChat}\n          aria-label={t('tooltip.quickNewChat')}\n          isDisabled={newChatDisabled}\n        >\n          <EditSquareIcon />\n        </Button>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}