@stack-spot/ai-chat-widget 1.0.0-dev.1768423745486 → 1.0.0-dev.1768481996541

package/dist/components/Selector/styled.js

@@ -0,0 +1,202 @@
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+export const SelectorBox = styled.div `
+  position: absolute;
+  bottom: 0;
+
+  .box-selector  {
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[400]};
+    box-shadow: 0px 2px 16px 0px #0000005C;
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    bottom: 54px;
+    left: 0;
+
+    .loading, .error {
+      padding-bottom: 26px;
+      p {
+        width: 200px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+
+    .empty {
+      padding-bottom: 26px;
+      width: 200px;
+      text-align: center;
+      line-height: 20px;
+      margin: auto;
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      padding: 0 8px;
+      margin-bottom: 4px;
+      background-color: ${theme.color.light[500]};
+      height: 40px;
+      h3 {
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 12px;
+        margin: 0;
+      }
+    }
+
+    .body {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      align-items: flex-start;
+      height: ${({ $tabsCount }) => 34 + ($tabsCount * 34)}px;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    ul.tabs {
+      display: flex;
+      flex-direction: column;
+      min-width: 100px;
+
+      li {
+        display: flex;
+        flex-direction: column;
+      }
+
+      button {
+        box-sizing: border-box;
+        color: ${theme.color.light[700]};
+        text-align: left;
+        padding: 10px;
+        font-weight: 600;
+        font-size: 12px;
+        transition: background-color 0.3s;
+        border-left: 1px solid transparent;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        outline: none;
+
+        &:hover, &.active, &:focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        &.active {
+          border-left: 1px solid ${theme.color.light.contrastText};
+          color: ${theme.color.light.contrastText};
+        }
+      }
+    }
+
+    ul.selector-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      flex: 1;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+
+        &:hover, &.focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        button.selector {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          gap: 4px;
+          border: none;
+          text-align: left;
+          background-color: transparent;
+          text-align: left;
+          outline: none;
+          overflow: hidden;
+          cursor: pointer;
+          padding: 0;
+          
+        .selector-title {
+            font-size: 12px;
+            color: ${theme.color.light.contrastText};
+            font-weight: 500;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            margin: 0;
+          }
+
+         .selector-description {
+            color: ${theme.color.light[700]};
+            font-size: 12px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+`;
+export const VersionSelector = styled.div `
+  position: relative;
+  min-width: 100px;
+
+  .version-selector {
+    height: 28px;
+    position: absolute;
+    top: -18px;
+    left: -12px;
+
+    header {
+      height: 20px;
+      background-color: ${theme.color.light[300]};
+      border: none;
+      margin-bottom: 0;
+      gap: 0;
+      padding: 0;
+      
+    }
+    .selection-panel .options{
+      overflow: hidden;
+    }
+    li {
+      gap: 5px;
+      padding: 0 8px 0 !important;
+      padding-left: 5px;
+    }
+  }
+
+`;
+export const VersionSelectorBox = styled.div `
+  border: 1px solid ${theme.color.light[500]};
+  border-radius: 4px;
+  .version-selector {
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+  > div {
+    position: relative;
+    .options {
+      overflow: hidden;
+    }
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/components/Selector/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/Selector/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG1C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;;wBAOrC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgCpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;gBAehC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,UAAU,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;iBAqBzC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;8BAeT,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;mCAIjB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;mBAC9C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;8BAsBnB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;qBAmB/B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;qBAQ9B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;CAQ1C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;0BAYf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;CAiB/C,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;sBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;CAa3C,CAAA"}

package/dist/components/StackedBadge.d.ts

@@ -0,0 +1,14 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { FastOmit } from 'styled-components/dist/types';
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
+    label: string;
+    images: {
+        key?: React.Key;
+        name: string;
+        url?: string;
+        icon?: React.ReactElement;
+    }[];
+}
+export declare const StackedBadge: ({ label, images, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StackedBadge.d.ts.map

package/dist/components/StackedBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBadge.d.ts","sourceRoot":"","sources":["../../src/components/StackedBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAEvD,UAAU,KAAM,SAAQ,QAAQ,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,EAAE,KAAK,CAAC;IACxG,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;KAAE,EAAE,CAAC;CACtF;AAmDD,eAAO,MAAM,YAAY,gCAAiC,KAAK,4CAgB9D,CAAA"}

package/dist/components/StackedBadge.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@stack-spot/citric-react';
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+const Styled = styled.div `
+  border-radius: 25px;
+  background-color: ${theme.color.light[600]};
+  border: 1px solid ${theme.color.light[500]};
+  color: ${theme.color.light[700]};
+  padding: 2px 7px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+
+  small {
+    line-height: 0.75rem;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+
+    li {
+      border: 1px solid ${theme.color.light[600]};
+      background-color: ${theme.color.light[400]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:not(:first-child) {
+        margin-left: -12px;
+      }
+    }
+
+    .citric-icon {
+      margin: 1px;
+      font-size: 10px;
+    }
+
+    img, svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;
+export const StackedBadge = ({ label, images, ...props }) => (_jsxs(Styled, { ...props, children: [_jsx(Text, { appearance: "microtext1", children: label }), _jsx("ul", { children: images.map(({ key, name, url, icon }, i) => (_jsx("li", { children: url
+                    ? _jsx("img", { alt: name, "aria-label": name, title: name, src: url })
+                    : _jsx("span", { "aria-label": name, title: name, children: icon }) }, key || i))) })] }));
+//# sourceMappingURL=StackedBadge.js.map

package/dist/components/StackedBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBadge.js","sourceRoot":"","sources":["../../src/components/StackedBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAQ1C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;sBAEH,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;sBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;WACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;0BAkBP,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;0BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwB/C,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE,CAAC,CAClE,MAAC,MAAM,OAAK,KAAK,aACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,KAAK,GAAQ,EAC5C,uBACG,MAAM,CAAC,GAAG,CACT,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,uBACG,GAAG;oBACF,CAAC,CAAC,cAAK,GAAG,EAAE,IAAI,gBAAc,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI;oBAC7D,CAAC,CAAC,6BAAkB,IAAI,EAAE,KAAK,EAAE,IAAI,YAAG,IAAI,GAAQ,IAH/C,GAAG,IAAI,CAAC,CAKZ,CACN,CACF,GACE,IACE,CACV,CAAA"}

package/dist/components/TabManager.d.ts

@@ -0,0 +1,40 @@
+import { ButtonAction } from '../types.js';
+interface Props<T, Key extends React.Key> {
+    /**
+     * The list of tabs.
+     */
+    tabs: T[];
+    /**
+     * Function to generate a unique id for a tab.
+     */
+    keygen: (tab: T) => Key;
+    /**
+     * The key corresponding to the tab currently active.
+     */
+    active: Key;
+    /**
+     * Function to call once a tab is selected.
+     */
+    onSelect: (tab: T) => void;
+    /**
+     * Function to run once a tab is closed.
+     */
+    onRemove: (tab: T) => void;
+    /**
+     * Extra buttons that goes in the far-end of the tab manager.
+     */
+    buttons?: ButtonAction[];
+    /**
+     * Function to render the label inside the tab.
+     */
+    renderLabel: (tab: T) => React.ReactElement;
+}
+/**
+ * Renders and manages a list of tabs. With this, tabs can be selected and removed. Furthermore, extra buttons can be placed after all tabs,
+ * e.g. a button to add more tabs.
+ *
+ * Used for the chat tabs.
+ */
+export declare function TabManager<T, Key extends React.Key>({ active, tabs, keygen, onRemove, onSelect, renderLabel, buttons }: Props<T, Key>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabManager.d.ts.map

package/dist/components/TabManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabManager.d.ts","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,UAAU,KAAK,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC7C;AAqGD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG,EACjD,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAY,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,2CA+DvF"}

package/dist/components/TabManager.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Tabs to select chat and add new chats */
+import { Icon } from '@stack-spot/citric-icons';
+import { Button, IconButton } from '@stack-spot/citric-react';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { last } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { styled } from 'styled-components';
+import { FadingOverflow } from './FadingOverflow.js';
+// The size of extra buttons placed after the tabs.
+const EXTRA_BTN_SIZE = 24;
+// The margin of extra buttons placed after the tabs.
+const EXTRA_BTN_MARGIN = 8;
+const Tabs = styled.nav `
+  width: 100%;
+  background-color: ${theme.color.light[400]};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid ${theme.color.light[500]};
+
+  button {
+    cursor: pointer;
+
+    &.extra {
+      padding: 0;
+      transition: background-color 0.3s;
+      width: ${EXTRA_BTN_SIZE}px;
+      height: ${EXTRA_BTN_SIZE}px;
+      margin: 0 ${EXTRA_BTN_MARGIN}px;
+
+      &:hover {
+        background-color: ${theme.color.light[500]};
+      }
+    }
+  }
+
+  .list-overflow {
+    max-width: ${({ $numberOfExtraButtons }) => `calc(100% - ${$numberOfExtraButtons * (EXTRA_BTN_SIZE + EXTRA_BTN_MARGIN * 2)}px)`};
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+
+    &::-webkit-scrollbar {
+      width: 2px;
+      height: 2px;
+      opacity: 0;
+    }
+    
+    li {
+      cursor: pointer;
+      overflow-x: clip;
+      white-space: nowrap;
+      height: 39px;
+      padding: 0 12px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      border-top: 1px solid transparent;
+      border-right: 1px solid ${theme.color.light[500]};
+      background-color: ${theme.color.light[400]};
+      transition: background-color 0.3s, border-color 0.3s;
+
+      &.active, &:hover {
+        button {
+          opacity: 1;
+        }
+      }
+
+      &:hover {
+        background-color: ${theme.color.light[500]};
+      }
+
+      &.active {
+        background-color: ${theme.color.light[500]};
+        border-top-color: ${theme.color.secondary[400]};
+      }
+
+      button {
+        opacity: 0.7;
+        transition: opacity 0.3s;
+      }
+
+      button.label {
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: clip;
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        color: inherit;
+        position: relative;
+
+        &.overflow {
+          mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
+        }
+      }
+    }
+  }
+`;
+/**
+ * Renders and manages a list of tabs. With this, tabs can be selected and removed. Furthermore, extra buttons can be placed after all tabs,
+ * e.g. a button to add more tabs.
+ *
+ * Used for the chat tabs.
+ */
+export function TabManager({ active, tabs, keygen, onRemove, onSelect, renderLabel, buttons = [] }) {
+    const t = useTranslate(dictionary);
+    const tabList = useRef(null);
+    const lastNumberOfTabs = useRef(tabs.length);
+    const onClickTab = useCallback((event) => {
+        const target = event.target;
+        if (target.tagName === 'LI')
+            target.querySelector('button')?.click();
+    }, []);
+    const tabItems = useMemo(() => tabs.map((tab) => (_jsxs("li", { className: keygen(tab) === active ? 'active' : undefined, onClick: onClickTab, children: [_jsx("button", { className: "label", onClick: () => onSelect(tab), children: _jsx(FadingOverflow, { children: renderLabel(tab) }) }), tabs.length > 1 &&
+                _jsx(IconButton, { appearance: "text", icon: "TimesMini", "aria-label": t.close, title: t.close, onClick: () => onRemove(tab) })] }, keygen(tab)))), [tabs, active]);
+    const extras = useMemo(() => buttons.map(({ ariaLabel, title, label, onClick, group, icon, appearance, size, className, style, disabled }) => label
+        ? _jsxs(Button, { style: { marginRight: '4px', ...style }, colorScheme: "light", size: "md", title: title || label, onClick: onClick, disabled: disabled, children: [_jsx(Icon, { group: group, icon: icon }), label] }, ariaLabel)
+        : _jsx(IconButton, { group: group, icon: icon, "aria-label": ariaLabel, title: title, size: size, className: listToClass([className, 'extra']), style: style, onClick: onClick, appearance: appearance }, ariaLabel)), [buttons]);
+    // when a new tab is added, we should scroll to it if there are more tabs that we can show.
+    useEffect(() => {
+        if (tabs.length > lastNumberOfTabs.current) {
+            const items = tabList.current?.children ?? [];
+            last(items)?.scrollIntoView({ behavior: 'smooth' });
+        }
+        lastNumberOfTabs.current = tabs.length;
+    }, [tabs]);
+    return (_jsxs(Tabs, { "$numberOfExtraButtons": buttons.length, className: "tabs", children: [_jsx(FadingOverflow, { className: "list-overflow", scroll: "arrows", enableHorizontalScrollWithVerticalWheel: true, children: _jsx("ul", { ref: tabList, children: tabItems }) }), extras] }));
+}
+const dictionary = {
+    en: {
+        close: 'Close',
+    },
+    pt: {
+        close: 'Fechar',
+    },
+};
+//# sourceMappingURL=TabManager.js.map

package/dist/components/TabManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabManager.js","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"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"}

package/dist/components/ToolBadge.d.ts

@@ -0,0 +1,9 @@
+type Props = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & {
+    name: string;
+    duration?: number;
+    image?: string;
+    description?: string;
+};
+export declare const ToolBadge: ({ name, duration, image, description, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ToolBadge.d.ts.map

package/dist/components/ToolBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBadge.d.ts","sourceRoot":"","sources":["../../src/components/ToolBadge.tsx"],"names":[],"mappings":"AAOA,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAwBD,eAAO,MAAM,SAAS,qDAC8B,KAAK,4CA6BxD,CAAA"}

package/dist/components/ToolBadge.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon } from '@stack-spot/citric-icons';
+import { Accordion, Card, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react';
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+import { useCurrentChatState } from '../context/hooks.js';
+import { toPrecision } from '../views/Steps/utils.js';
+const Styled = styled.div `
+  [data-citric="card"] {
+    flex-direction: row;
+    gap: 8px;
+    border-radius: ${theme.radius.xl};
+    border: none;
+    align-items: center;
+    padding: 4px 16px 4px 4px;
+  }
+
+  [data-citric="accordion"] {
+    background-color: ${theme.color.light[500]};
+    > header > label {
+      padding: 6px 10px 6px 6px;
+      font: ${theme.font.body2};
+      input:before {
+        font-size: 12px !important;
+      }
+    }
+  }
+`;
+export const ToolBadge = ({ name, duration, image, description, ...props }) => {
+    const currentAgent = useCurrentChatState('agent');
+    const header = _jsxs(_Fragment, { children: [_jsx(ImageBox, { children: _jsx(ImageWithFallback, { src: image, fallback: _jsx(ImageWithFallback, { src: currentAgent?.image ?? '', className: "image", fallback: _jsx(Icon, { icon: "Cog", className: "tool-image" }) }) }) }), _jsx(Text, { color: "light.700", className: "name", style: { flex: 1 }, children: name }), duration !== undefined && _jsxs(Text, { color: "light.700", className: "duration", children: [toPrecision(duration), "s"] })] });
+    return _jsx(Styled, { children: description ? (_jsx(Accordion, { appearance: "card", header: header, ...props, children: _jsx(Text, { className: "description", color: "light.700", children: description }) })) : _jsx(Card, { ...props, children: header }) });
+};
+//# sourceMappingURL=ToolBadge.js.map

package/dist/components/ToolBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBadge.js","sourceRoot":"","sources":["../../src/components/ToolBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AASlD,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;qBAIJ,KAAK,CAAC,MAAM,CAAC,EAAE;;;;;;;wBAOZ,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;cAGhC,KAAK,CAAC,IAAI,CAAC,KAAK;;;;;;CAM7B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAS,EACvD,EAAE;IACF,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IAEjD,MAAM,MAAM,GAAG,8BACb,KAAC,QAAQ,cAAC,KAAC,iBAAiB,IAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAC/C,KAAC,iBAAiB,IAChB,GAAG,EAAE,YAAY,EAAE,KAAK,IAAI,EAAE,EAC9B,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,GAAG,GACpD,GACA,GAAW,EACf,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,IAAI,GAAQ,EACzE,QAAQ,KAAK,SAAS,IAAI,MAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,UAAU,aACpE,WAAW,CAAC,QAAQ,CAAC,SACjB,IACN,CAAA;IAEH,OAAO,KAAC,MAAM,cACX,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,UAAU,EAAC,MAAM,EACjB,MAAM,EAAE,MAAM,KACV,KAAK,YAET,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAC,WAAW,YAAE,WAAW,GAAQ,GAC1D,CACb,CAAC,CAAC,CAAC,KAAC,IAAI,OAAK,KAAK,YAAG,MAAM,GAAQ,GAC7B,CAAA;AACX,CAAC,CAAA"}

package/dist/components/WorkspaceTabNavigator.d.ts

@@ -0,0 +1,17 @@
+import { WorkspaceResponse, WorkspaceVisibilityLevelEnum } from '@stack-spot/portal-network/api/workspace-ai';
+import { ComponentNavigatorProps, NavigationComponent, NavigationMap } from './ComponentNavigator.js';
+interface CardSpaceProps {
+    onClick: VoidFunction;
+    name: string;
+    icon: React.ReactElement;
+    logoUrl?: string | null;
+}
+export declare const CardSpace: ({ onClick, name, icon, logoUrl }: CardSpaceProps) => import("react/jsx-runtime").JSX.Element;
+interface WorkspaceTabNavigatorProps {
+    getNavigateParam: (workspace: WorkspaceResponse) => NavigationComponent<NavigationMap, string>;
+    visibility?: WorkspaceVisibilityLevelEnum;
+    className?: string;
+}
+export declare function WorkspaceTabNavigator<T extends NavigationMap, K extends keyof T>({ components, getNavigateParam, visibility, className }: Omit<ComponentNavigatorProps<T, K>, 'initialItem'> & WorkspaceTabNavigatorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WorkspaceTabNavigator.d.ts.map

package/dist/components/WorkspaceTabNavigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceTabNavigator.d.ts","sourceRoot":"","sources":["../../src/components/WorkspaceTabNavigator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAK7G,OAAO,EAAsB,uBAAuB,EAAE,mBAAmB,EAAE,aAAa,EAA0B,MAAM,sBAAsB,CAAA;AAG9I,UAAU,cAAc;IACtB,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,qCAAsC,cAAc,4CAkBlE,CAAA;AA8FR,UAAU,0BAA0B;IAClC,gBAAgB,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC/F,UAAU,CAAC,EAAE,4BAA4B,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,EACvI,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG,0BAA0B,2CAgBhF"}

package/dist/components/WorkspaceTabNavigator.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon } from '@stack-spot/citric-icons';
+import { FieldGroup, IconButton, ImageBox, Input, Row, Text } from '@stack-spot/citric-react';
+import { Placeholder } from '@stack-spot/portal-components/Placeholder';
+import { workspaceAiClient } from '@stack-spot/portal-network';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { memo, useMemo, useState } from 'react';
+import { useRightPanel } from '../right-panel/hooks.js';
+import { ButtonFavorite } from './ButtonFavorite.js';
+import { ComponentNavigator, useComponentNavigation } from './ComponentNavigator.js';
+import { ListResource } from './ListResource.js';
+export const CardSpace = ({ onClick, name, icon, logoUrl }) => _jsxs(Row, { onClick: onClick, flex: 1, justifyContent: "space-between", mr: 2, bg: "light.400", radius: "sm", p: 3, style: { cursor: 'pointer' }, children: [_jsxs(Row, { gap: "8px", children: [_jsx(ImageBox, { appearance: "square", children: logoUrl ? _jsx("img", { src: logoUrl }) : icon }), _jsx(Text, { appearance: "body2", children: name })] }), _jsx(IconButton, { icon: "ArrowRight" })] });
+const WorkspaceSourcesTab = ({ visibility, onClick }) => {
+    const t = useTranslate(dictionary);
+    const [filter, setFilter] = useState('');
+    const workspaces = workspaceAiClient.workspacesAi.useQuery({ visibility });
+    const listFavorites = workspaceAiClient.workspacesAi.useQuery({ visibility: 'favorite' });
+    const [addFavorite, pendingAddFav] = workspaceAiClient.addFavoriteWorkspaceAi.useMutation();
+    const [removeFavorite, pendingRemoveFav] = workspaceAiClient.removeFavoriteWorkspaceAi.useMutation();
+    // eslint-disable-next-line no-async-promise-executor
+    const onAddFavorite = async (idOrSlug) => new Promise(async (resolve, reject) => {
+        try {
+            await addFavorite({ workspaceId: idOrSlug });
+            await workspaceAiClient.workspacesAi.invalidate();
+            if (!pendingAddFav) {
+                resolve(true);
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            reject(error);
+        }
+    });
+    // eslint-disable-next-line no-async-promise-executor
+    const onRemoveFavorite = (idOrSlug) => new Promise(async (resolve, reject) => {
+        try {
+            await removeFavorite({ workspaceId: idOrSlug });
+            await workspaceAiClient.workspacesAi.invalidate();
+            if (!pendingRemoveFav) {
+                resolve(true);
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            reject(error);
+        }
+    });
+    const filtered = useMemo(
+    // Recreate the list so that the favorites list is taken into account
+    () => filter ? workspaces.filter(w => w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...workspaces], [workspaces, filter, listFavorites]);
+    return (_jsxs(_Fragment, { children: [_jsxs(FieldGroup, { fullWidth: true, style: { alignSelf: 'stretch' }, children: [_jsx(Icon, { icon: "Search" }), _jsx(Input, { type: "search", value: filter, onChange: setFilter })] }), !!filtered.length &&
+                _jsx(ListResource, { list: filtered, keygen: w => w.id, style: { gap: '6px', display: 'flex', flexDirection: 'column' }, renderLabel: w => _jsx(CardSpace, { name: w.name, logoUrl: w.logo, icon: _jsx(Icon, { icon: "Spaces" }), onClick: () => onClick(w) }), renderAfterElement: (w) => _jsx(ButtonFavorite, { favorite: { idOrSlug: w?.id, listFavorites, onAddFavorite, onRemoveFavorite } }), optionClassName: w => (filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+                        ? 'filtered-out'
+                        : '', className: "option-list" }), _jsxs("div", { style: { width: '100%' }, children: [!!workspaces.length && !filtered.length &&
+                        _jsx(Placeholder, { title: t.noSearchResults, description: t.noSearchResultsDescription, className: "no-data-placeholder" }), !workspaces.length && _jsx(Placeholder, { title: t.noData, description: t.noDataDescription })] })] }));
+};
+const WorkspaceHeader = ({ data }) => {
+    const { close: closeRightPanel } = useRightPanel();
+    const workspaceId = data.props['workspaceId'];
+    if (!workspaceId)
+        return;
+    const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId });
+    return _jsxs(Row, { justifyContent: "space-between", flex: 1, children: [data.component === 'workspaceResource' ? 'Spots' : workspace.name, data.fullScreen && _jsx(IconButton, { icon: "Times", title: 't.close', "aria-label": 't.close', onClick: closeRightPanel })] });
+};
+export function WorkspaceTabNavigator({ components, getNavigateParam, visibility, className }) {
+    const workspaceTabComponents = useMemo(() => ({
+        workspace: memo(function WorkspacesTab() {
+            const { navigate } = useComponentNavigation();
+            return (_jsx(WorkspaceSourcesTab, { visibility: visibility ?? 'all', onClick: (w) => navigate(getNavigateParam(w)) }));
+        }),
+        ...components,
+    }), [components]);
+    return _jsx(ComponentNavigator, { initialItem: { component: 'workspace' }, components: workspaceTabComponents, className: className, renderTitle: (data) => _jsx(WorkspaceHeader, { data: data }) });
+}
+const dictionary = {
+    en: {
+        noSearchResults: "Your search didn't yield results.",
+        noSearchResultsDescription: 'Please, try another search term.',
+        noData: 'There are no spot yet.',
+        noDataDescription: 'Use the AI portal to create new spots.',
+        apply: 'Apply',
+    },
+    pt: {
+        noSearchResults: 'Sua busca não produziu resultados',
+        noSearchResultsDescription: 'Por favor, tente outra busca.',
+        noData: 'Ainda não há spots.',
+        noDataDescription: 'Use o Portal AI para criar novos spots.',
+        apply: 'Aplicar',
+    },
+};
+//# sourceMappingURL=WorkspaceTabNavigator.js.map