@stack-spot/ai-chat-widget 1.8.1 → 1.8.3

package/dist/components/FallbackBoundary/index.d.ts

@@ -0,0 +1,17 @@
+import { WithChildren } from '../../types.js';
+interface Props extends WithChildren {
+    /**
+     * Use this to show errors in small spaces.
+     */
+    mini?: boolean;
+    /**
+     * Replaces the error message with this text.
+     */
+    message?: string;
+}
+/**
+ * Fallbacks for errors and loadings (suspense).
+ */
+export declare const FallbackBoundary: ({ children, mini, message }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FallbackBoundary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAI1C,UAAU,KAAM,SAAQ,YAAY;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAAiC,KAAK,4CAMlE,CAAA"}

package/dist/components/FallbackBoundary/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { ErrorBoundary } from './ErrorBoundary.js';
+import { Loading } from './Loading.js';
+/**
+ * Fallbacks for errors and loadings (suspense).
+ */
+export const FallbackBoundary = ({ children, mini, message }) => (_jsx(ErrorBoundary, { mini: mini, message: message, children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: children }) }));
+//# sourceMappingURL=index.js.map

package/dist/components/FallbackBoundary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FallbackBoundary/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAanC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CACtE,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YACzC,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,OAAO,KAAG,YAC5B,QAAQ,GACA,GACG,CACjB,CAAA"}

package/dist/components/HistoryList.d.ts

@@ -0,0 +1,25 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+interface Props<T> extends WithStyle {
+    /**
+     * The items in the history.
+     */
+    items: T[];
+    /**
+     * A function to render an item.
+     */
+    renderItem: (item: T) => React.ReactNode;
+    /**
+     * A function that returns the date of the item.
+     */
+    getDate: (item: T) => Date;
+    /**
+     * A function that returns a unique id for the item.
+     */
+    keygen: (item: T) => React.Key;
+}
+/**
+ * Renders a history list, where the items are combined into sections according to their dates.
+ */
+export declare function HistoryList<T>({ getDate, items, keygen, className, style, renderItem }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HistoryList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryList.d.ts","sourceRoot":"","sources":["../../src/components/HistoryList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAS3D,UAAU,KAAK,CAAC,CAAC,CAAE,SAAQ,SAAS;IAClC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;CAChC;AAuCD;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,2CAehG"}

package/dist/components/HistoryList.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@citric/core';
+import { theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { groupBy, map } from 'lodash';
+import { useMemo } from 'react';
+import { styled } from 'styled-components';
+import { subtractDays } from '../utils/date.js';
+const HistoryBox = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  > section {
+    > header {
+      background-color: ${theme.color.light[500]};
+      padding: 8px;
+      border-radius: 4px;
+      color: ${theme.color.light[700]};
+      margin-bottom: 4px;
+    }
+
+    > ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+  }
+`;
+function dateToSectionName(date) {
+    const now = new Date();
+    if (date.toDateString() === now.toDateString())
+        return 'today';
+    const yesterday = subtractDays(now, 1);
+    if (date.toDateString() === yesterday.toDateString())
+        return 'yesterday';
+    const todayAtMidnight = new Date(now.toDateString());
+    const last7Days = subtractDays(todayAtMidnight, 7);
+    if (date.getTime() >= last7Days.getTime())
+        return 'last7';
+    const last30Days = subtractDays(todayAtMidnight, 30);
+    return date.getTime() >= last30Days.getTime() ? 'last30' : 'older';
+}
+/**
+ * Renders a history list, where the items are combined into sections according to their dates.
+ */
+export function HistoryList({ getDate, items, keygen, className, style, renderItem }) {
+    const t = useTranslate(dictionary);
+    const sections = useMemo(() => {
+        const byDate = groupBy(items, item => dateToSectionName(getDate(item)));
+        return map(byDate, (value, key) => (_jsxs("section", { children: [_jsx("header", { children: _jsx(Text, { children: t[key] }) }), _jsx("ul", { children: value.map(item => _jsx("li", { children: renderItem(item) }, keygen(item))) })] }, key)));
+    }, [items]);
+    return _jsx(HistoryBox, { className: className, style: style, children: sections });
+}
+const dictionary = {
+    en: {
+        today: 'Today',
+        yesterday: 'Yesterday',
+        last7: 'Last 7 days',
+        last30: 'Last 30 days',
+        older: 'Older',
+    },
+    pt: {
+        today: 'Hoje',
+        yesterday: 'Ontem',
+        last7: 'Últimos 7 dias',
+        last30: 'Últimos 30 dias',
+        older: 'Mais antigo',
+    },
+};
+//# sourceMappingURL=HistoryList.js.map

package/dist/components/HistoryList.js.map

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

package/dist/components/IconInput.d.ts

@@ -0,0 +1,10 @@
+interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    icon: React.ReactElement;
+    onChange?: (value: string) => void;
+}
+/**
+ * A text input with an icon at the left side.
+ */
+export declare const IconInput: ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconInput.d.ts","sourceRoot":"","sources":["../../src/components/IconInput.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACnF,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAyCD;;GAEG;AACH,eAAO,MAAM,SAAS,8EAA+E,KAAK,4CAoBzG,CAAA"}

package/dist/components/IconInput.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox } from '@citric/core';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useMemo, useState } from 'react';
+import { styled } from 'styled-components';
+const InputBox = styled.div `
+  display: flex;
+  flex-direction: row;
+  transition: border-color 0.3s, box-shadow 0.3s;
+  border: 1px solid ${theme.color.light[600]};
+  border-radius: 0.25rem;
+  background-color: ${theme.color.light[300]};
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &.focused {
+    border-color: ${theme.color.primary[500]};
+    box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+  }
+
+  &.disabled {
+      background-color: ${theme.color.light[500]};
+    }
+
+  ${IconBox} {
+    width: 40px;
+    height: 40px;
+    border-radius: 0;
+    background-color: ${theme.color.light[600]};
+  }
+
+  input {
+    padding: 8px;
+    border: none;
+    background-color: transparent;
+    flex: 1;
+    color: ${theme.color.light.contrastText};
+
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+/**
+ * A text input with an icon at the left side.
+ */
+export const IconInput = ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }) => {
+    const [focused, setFocused] = useState(false);
+    const { focus, blur } = useMemo(() => ({
+        focus: (e) => {
+            setFocused(true);
+            onFocus?.(e);
+        },
+        blur: (e) => {
+            setFocused(false);
+            onBlur?.(e);
+        },
+    }), []);
+    return (_jsxs(InputBox, { style: style, className: listToClass([className, focused && !disabled && 'focused', disabled && 'disabled']), children: [_jsx(IconBox, { children: icon }), _jsx("input", { ...props, disabled: disabled, onFocus: focus, onBlur: blur, onChange: e => onChange?.(e.target.value) })] }));
+};
+//# sourceMappingURL=IconInput.js.map

package/dist/components/IconInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInput.js","sourceRoot":"","sources":["../../src/components/IconInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAO1C,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;sBAIL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;sBAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;oBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;4BAChB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;0BAI1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;IAG5C,OAAO;;;;wBAIa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;aAQjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;CAM1C,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE;IAC5G,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACrC,KAAK,EAAE,CAAC,CAA8C,EAAE,EAAE;YACxD,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;QACD,IAAI,EAAE,CAAC,CAA8C,EAAE,EAAE;YACvD,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;QACb,CAAC;KACF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEP,OAAO,CACL,MAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,OAAO,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAE,QAAQ,IAAI,UAAU,CAAC,CAAC,aACpH,KAAC,OAAO,cAAE,IAAI,GAAW,EACzB,mBAAW,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,IACxG,CACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Markdown.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copied from the extension's webview.
+ */
+import { WithChildren } from '../types.js';
+import { Props as CodeProps } from './Code.js';
+type Props = Omit<CodeProps, 'language'> & WithChildren<string>;
+export declare const Markdown: ({ onInsertCode, onNewFile, onCopyCode, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Markdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAQ,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEjD,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;AAc/D,eAAO,MAAM,QAAQ,uDAMhB,KAAK,4CAsBT,CAAA"}

package/dist/components/Markdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Copied from the extension's webview.
+ */
+import { Children, Fragment } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Code } from './Code.js';
+const renderP = (child, key) => (_jsx(Fragment, { children: typeof child === 'string'
+        ? child.split('\n').map((content, subKey, array) => (_jsxs(Fragment, { children: [content, subKey < array.length - 1 ? _jsx("br", {}) : null] }, subKey))) : child }, key));
+export const Markdown = ({ onInsertCode, onNewFile, onCopyCode, children, }) => (_jsx(_Fragment, { children: _jsx(ReactMarkdown, { remarkPlugins: [[remarkGfm]], components: {
+            a: props => _jsx("a", { target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'underline' }, ...props }),
+            code: props => _jsx(Code, { ...props, onInsertCode: onInsertCode, onNewFile: onNewFile, onCopyCode: onCopyCode, showActionBar: true }),
+            pre: ({ children }) => _jsx(_Fragment, { children: children }),
+            p: ({ children }) => _jsx("p", { children: Children.map(children, renderP) }),
+        }, children: children }) }));
+//# sourceMappingURL=Markdown.js.map

package/dist/components/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../src/components/Markdown.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,OAAO,EAAE,IAAI,EAAsB,MAAM,QAAQ,CAAA;AAIjD,MAAM,OAAO,GAAG,CAAC,KAAU,EAAE,GAAW,EAAE,EAAE,CAAC,CAC3C,KAAC,QAAQ,cACN,OAAO,KAAK,KAAK,QAAQ;QACxB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAClD,MAAC,QAAQ,eACN,OAAO,EACP,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAM,CAAC,CAAC,CAAC,IAAI,KAF7B,MAAM,CAGV,CACZ,CAAC,CAAC,CAAC,CAAC,KAAK,IAPC,GAAG,CAQP,CACZ,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,EACE,YAAY,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,GACF,EACR,EAAE,CAAC,CACH,4BACE,KAAC,aAAa,IACZ,aAAa,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAC5B,UAAU,EAAE;YACV,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,YAAG,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAM,KAAK,GAAI;YAC9G,IAAI,EAAE,KAAK,CAAC,EAAE,CACZ,KAAC,IAAI,OACC,KAAK,EACT,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,aAAa,SACb;YACJ,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,4BAAG,QAAQ,GAAI;YACtC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,sBAAI,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAK;SAC9D,YAEA,QAAQ,GACK,GACf,CACJ,CAAA"}

package/dist/components/OverlayMenu.d.ts

@@ -0,0 +1,21 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { ButtonAction, WithChildren } from '../types.js';
+import { TooltipPosition } from './Tooltip/types.js';
+interface Props extends WithStyle, WithChildren {
+    /**
+     * The position of the menu relative to its children.
+     */
+    position?: TooltipPosition;
+    /**
+     * The actions of the menu.
+     */
+    actions: ButtonAction[];
+}
+/**
+ * A floating menu that shows up when the user clicks the children.
+ *
+ * This uses the tooltip component to build the menu.
+ */
+export declare const OverlayMenu: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=OverlayMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayMenu.d.ts","sourceRoot":"","sources":["../../src/components/OverlayMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAG3D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGrD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,UAAU,KAAM,SAAQ,SAAS,EAAE,YAAY;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB;AAoFD;;;;GAIG;AACH,eAAO,MAAM,WAAW,kGAuBtB,CAAA"}

package/dist/components/OverlayMenu.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+import { IconBox, Text } from '@citric/core';
+import { useKeyboardControls } from '@stack-spot/portal-components';
+import { theme } from '@stack-spot/portal-theme';
+import { forwardRef, useCallback, useRef } from 'react';
+import { styled } from 'styled-components';
+import { Tooltip } from './Tooltip/index.js';
+import { useTooltip } from './Tooltip/context.js';
+const MenuList = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-radius: 8px;
+  background-color: ${theme.color.light[400]};
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  > li {
+    display: flex;
+    flex-direction: column;
+
+    > button {
+      padding: 8px 12px;
+      transition: background-color 0.2s;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      background-color: transparent;
+      border: none;
+      outline: none;
+
+      &:hover, &:focus {
+        background-color: ${theme.color.light[500]};
+      }
+    }
+  }
+`;
+const StyledButton = styled.button `
+  color: ${({ $color }) => $color || theme.color.light.contrastText};
+
+  svg {
+    fill: ${({ $color }) => $color || theme.color.light.contrastText};
+  }
+`;
+const Menu = ({ actions, trigger }) => {
+    const tooltip = useTooltip();
+    const ref = useRef(null);
+    useKeyboardControls({
+        querySelectors: 'button',
+        onPressEscape: () => {
+            tooltip.hide();
+            trigger.current?.focus();
+        },
+        ref,
+    }, []);
+    return (_jsx(MenuList, { ref: ref, children: actions.map(({ label, onClick, className, color, icon, style }) => (_jsx("li", { className: className, style: style, children: _jsxs(StyledButton, { "$color": color, onClick: () => {
+                    onClick();
+                    tooltip.hide();
+                }, children: [_jsx(IconBox, { children: icon }), _jsx(Text, { children: label })] }) }, label))) }));
+};
+/**
+ * A floating menu that shows up when the user clicks the children.
+ *
+ * This uses the tooltip component to build the menu.
+ */
+export const OverlayMenu = forwardRef(({ actions, children, className, position, style }, externalRef) => {
+    const localRef = useRef(null);
+    const ref = externalRef ?? localRef;
+    const tooltip = useTooltip();
+    const onShow = useCallback(() => {
+        tooltip.tooltipRef.current?.querySelector('button')?.focus();
+    }, []);
+    return (_jsx(Tooltip, { content: _jsx(Menu, { actions: actions, trigger: ref }), custom: true, position: position, className: className, style: style, triggeredBy: "click", onShow: onShow, ref: ref, children: children }));
+});
+//# sourceMappingURL=OverlayMenu.js.map

package/dist/components/OverlayMenu.js.map

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

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,33 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+interface Props extends WithStyle {
+    /**
+     * Whether or not the progress bar is visible.
+     */
+    visible?: boolean;
+    /**
+     * When true, the progress bar becomes very colorful and bright.
+     */
+    shimmer?: boolean;
+    /**
+     * Color to use in the progress bar that appears in the foreground. Arrays create linear gradients.
+     * @default primary.500 if shimmer is false, white otherwise.
+     */
+    foregroundColor?: string | string[];
+    /**
+     * Color to use in the progress bar that appears in the background. Arrays create linear gradients.
+     * @default light.500 if shimmer is false, a transparent white otherwise.
+     */
+    backgroundColor?: string | string[];
+    /**
+     * Only useful if `shimmer` is true. This allows to customize the colors in the shimmering effect. Arrays create linear gradients.
+     * @default ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4']
+     */
+    shimmerColor?: string | string[];
+}
+/**
+ * A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
+ * right.
+ */
+export declare const ProgressBar: ({ visible, shimmer, backgroundColor, foregroundColor, shimmerColor, className, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGxE,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC;AAqHD;;;GAGG;AACH,eAAO,MAAM,WAAW,4FAQrB,KAAK,4CAmBP,CAAA"}

package/dist/components/ProgressBar.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+function gradientFromColorArray(colors) {
+    if (colors.length === 1)
+        return colors[0];
+    const step = 100 / (colors.length - 1);
+    const partials = [];
+    let current = 0;
+    for (const color of colors) {
+        partials.push(`${color} ${Math.ceil(current)}%`);
+        current += step;
+    }
+    return `linear-gradient(to right, ${partials.join(', ')})`;
+}
+// the shimmering effect requires more space
+const SHIMMER_PADDING = '10px';
+const Styled = styled.div `
+  margin: 7px 0;
+  opacity: 0;
+  transition: opacity 0.5s;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  .shimmer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 10px;
+    position: relative;
+    padding: 0 ${SHIMMER_PADDING};
+    margin: 3px 0;
+
+    .progress-glow {
+      filter: blur(2px);
+      position: absolute;
+      top: 0;
+      left: ${SHIMMER_PADDING};
+      bottom: 0;
+      right: ${SHIMMER_PADDING};
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        height: 3px;
+        display: block;
+        width: 33%;
+        display: block;
+        animation: slide 3s infinite forwards;
+        background: ${({ $fg }) => gradientFromColorArray($fg)};
+      }
+    }
+
+    .colors {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      overflow: hidden;
+      filter: blur(10px);
+
+      ${({ $shimmer }) => `
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: ${$shimmer.length * 100}%;
+          background: ${gradientFromColorArray($shimmer)};
+          ${$shimmer.length > 2 ? `animation: shimmer-slide ${$shimmer.length}s ease-in infinite alternate;` : ''}
+        }
+          
+        @keyframes shimmer-slide {
+          from {
+            left: 0;
+          }
+          to {
+            left: -${($shimmer.length - 1) * 100}%;
+          }
+        }
+      `}
+    }
+  }
+
+  .progress-bar {
+    height: 2px;
+    width: 100%;
+    background: ${({ $bg }) => gradientFromColorArray($bg)};
+    position: relative;
+    overflow-x: clip;
+
+    &:before {
+      content: '';
+      display: block;
+      width: 33%;
+      height: 100%;
+      background: ${({ $fg }) => gradientFromColorArray($fg)};
+      animation: slide 3s infinite forwards;
+    }
+
+    @keyframes slide {
+      from {
+        margin-left: -33%;
+      }
+      to {
+        margin-left: 100%;
+      }
+    }
+  }
+`;
+/**
+ * A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
+ * right.
+ */
+export const ProgressBar = ({ visible = true, shimmer, backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500], foregroundColor = shimmer ? ['#FFF0', '#FFF', '#FFF0'] : theme.color.primary[500], shimmerColor = ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4'], className, style, }) => {
+    const $bg = Array.isArray(backgroundColor) ? backgroundColor : [backgroundColor];
+    const $fg = Array.isArray(foregroundColor) ? foregroundColor : [...$bg, foregroundColor, ...$bg];
+    const $shimmer = Array.isArray(shimmerColor) ? shimmerColor : [shimmerColor];
+    const progress = _jsx("div", { className: "progress-bar" });
+    const result = shimmer
+        ? (_jsxs("div", { className: "shimmer", children: [_jsx("div", { className: "colors" }), _jsx("div", { className: "progress-glow" }), progress] }))
+        : progress;
+    return (_jsx(Styled, { className: listToClass([className, visible && 'visible']), style: style, "$fg": $fg, "$bg": $bg, "$shimmer": $shimmer, children: result }));
+};
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar.js.map

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

package/dist/components/QuickStartButton.d.ts

@@ -0,0 +1,13 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { ButtonAction } from '../types.js';
+interface Props extends ButtonAction, WithStyle {
+    background?: string;
+    /**
+     * Whether or not the vertical overflow of this button should be managed by the component {@link FadingOverflow}.
+     * @default false
+     */
+    manageOverflow?: boolean;
+}
+export declare const QuickStartButton: ({ label, onClick, background, className, color, icon, style, manageOverflow }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=QuickStartButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickStartButton.d.ts","sourceRoot":"","sources":["../../src/components/QuickStartButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAyCD,eAAO,MAAM,gBAAgB,kFAAmF,KAAK,4CAWpH,CAAA"}

package/dist/components/QuickStartButton.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox, Text } from '@citric/core';
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+import { FadingOverflow } from './FadingOverflow.js';
+/**
+ * A button for quick starting a conversation.
+ */
+const QuickButton = styled.button `
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+  background-color: ${theme.color.light[500]};
+  border: none;
+  color: inherit;
+  flex: 1;
+  border-radius: 4px;
+  border: 2px solid;
+  border-color: ${theme.color.light[500]};
+  transition: border-color 0.3s;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    border-color: ${theme.color.light[600]};
+  }
+  
+  i {
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${({ $bg }) => $bg || 'transparent'};
+    ${({ $color }) => $color
+    ? `
+      svg {
+        fill: ${$color};
+      }`
+    : ''};
+  }
+`;
+export const QuickStartButton = ({ label, onClick, background, className, color, icon, style, manageOverflow }) => {
+    const content = _jsxs(_Fragment, { children: [icon && _jsx(IconBox, { "aria-hidden": true, children: icon }), _jsx(Text, { children: label })] });
+    return (_jsx(QuickButton, { className: className, style: style, onClick: onClick, "$color": color, "$bg": background, children: manageOverflow ? _jsx(FadingOverflow, { sides: ['top', 'bottom'], scroll: "wheel", children: content }) : content }));
+};
+//# sourceMappingURL=QuickStartButton.js.map

package/dist/components/QuickStartButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickStartButton.js","sourceRoot":"","sources":["../../src/components/QuickStartButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAWjD;;GAEG;AACH,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAmC;;;;;sBAK9C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;kBAM1B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;oBAMpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;wBAQlB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,aAAa;MACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;IACxB,CAAC,CAAC;;gBAEU,MAAM;QACd;IACJ,CAAC,CAAC,EACN;;CAEC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAS,EAAE,EAAE;IACvH,MAAM,OAAO,GAAG,8BACb,IAAI,IAAI,KAAC,OAAO,mCAAc,IAAI,GAAW,EAC9C,KAAC,IAAI,cAAE,KAAK,GAAQ,IACnB,CAAA;IAEH,OAAO,CACL,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,YAAU,KAAK,SAAO,UAAU,YAC9F,cAAc,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAC,OAAO,YAAE,OAAO,GAAkB,CAAC,CAAC,CAAC,OAAO,GACnG,CACf,CAAA;AACH,CAAC,CAAA"}

package/dist/components/RightPanelForm.d.ts

@@ -0,0 +1,8 @@
+import { PropsOf } from '../types.js';
+declare const Form: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, never>> & string;
+/**
+ * A form that goes into a right panel. This controls style, errors, loading focus and form submission.
+ */
+export declare const RightPanelForm: ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RightPanelForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanelForm.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAIlC,QAAA,MAAM,IAAI,8OAmCT,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,qCAAsC,OAAO,CAAC,OAAO,IAAI,CAAC,4CAcpF,CAAA"}