@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/dist/components/RightPanelTabs.d.ts

@@ -1,10 +1,10 @@
-interface Tab {
-    title: string;
-    content: React.ReactNode;
-}
+import { Tab } from '@stack-spot/citric-react';
 interface Props {
     tabs: Tab[];
 }
+/**
+ * Tabs for the right panel content.
+ */
 export declare const RightPanelTabs: ({ tabs }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RightPanelTabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanelTabs.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":"AAKA,UAAU,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,KAAK;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAcD,eAAO,MAAM,cAAc,aAAc,KAAK,4CAa7C,CAAA"}
+{"version":3,"file":"RightPanelTabs.d.ts","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAQ,MAAM,0BAA0B,CAAA;AAIpD,UAAU,KAAK;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,aAAc,KAAK,4CAG7C,CAAA"}

package/dist/components/RightPanelTabs.js

@@ -1,21 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs, TabsItem } from '@citric/ui';
-import { useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { Tabs } from '@stack-spot/citric-react';
+import { useMemo } from 'react';
 import { RightPanelForm } from './RightPanelForm.js';
-const StyledTabs = styled(Tabs) `
-  > button {
-    flex: 1;
-    padding: 8px 0;
-  }
-`;
-const StyledTabsItem = styled(TabsItem) `
-  flex: 1;
-  overflow: hidden;
-`;
+/**
+ * Tabs for the right panel content.
+ */
 export const RightPanelTabs = ({ tabs }) => {
-    const [currentTab, setCurrentTab] = useState(0);
-    const tabItems = useMemo(() => tabs.map(({ content, title }) => (_jsx(StyledTabsItem, { title: title, children: _jsx(RightPanelForm, { children: content }) }, title))), [tabs]);
-    return (_jsx(StyledTabs, { activeIndex: currentTab, onChange: setCurrentTab, children: tabItems }));
+    const tabItems = useMemo(() => tabs.map(t => ({ ...t, content: _jsx(RightPanelForm, { children: t.content }) })), [tabs]);
+    return _jsx(Tabs, { tabs: tabItems, equallySized: true });
 };
 //# sourceMappingURL=RightPanelTabs.js.map

package/dist/components/RightPanelTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanelTabs.js","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAWjD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;CAGtC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC9D,KAAC,cAAc,IAAa,KAAK,EAAE,KAAK,YACtC,KAAC,cAAc,cAAE,OAAO,GAAkB,IADvB,KAAK,CAET,CAClB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,KAAC,UAAU,IAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,YACzD,QAAQ,GACE,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"RightPanelTabs.js","sourceRoot":"","sources":["../../src/components/RightPanelTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAMjD;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;IAChD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,KAAC,cAAc,cAAE,CAAC,CAAC,OAAO,GAAkB,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACxH,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,SAAG,CAAA;AAC9C,CAAC,CAAA"}

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

@@ -0,0 +1,54 @@
+import { AgentVisibilityLevel } from '@stack-spot/portal-network';
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai';
+import React, { FC } from 'react';
+type SectionVisibility = AgentVisibilityLevel | VisibilityLevelEnum;
+type SelectorShortcut = '/' | '@';
+interface Favorite<T> {
+    /**
+     * A react hook or a simple function that returns the selectable items that have been set as favorite.
+     *
+     * Supports suspended hooks.
+     *
+     * @returns the favorite items in the selector.
+     */
+    useFavorites?: () => T[];
+    onAddFavorite?: (idOrSlug?: string) => Promise<boolean>;
+    onRemoveFavorite?: (idOrSlug?: string) => Promise<boolean>;
+    favoriteIsSlug?: boolean;
+}
+interface PropsUseData<T> {
+    data: T[];
+    fetchNextPage?: () => void;
+    hasNextPage?: boolean;
+}
+interface SelectorConfig<T> {
+    resourceName: string;
+    shortcut: SelectorShortcut;
+    icon: React.ReactElement;
+    regex: RegExp;
+    urlBuilder: (item: T) => string;
+    searchProp: keyof T;
+    isEnabled: boolean;
+    sections: SectionVisibility[];
+    renderComponentItem: FC<T>;
+    onSelect: (item: T) => void;
+    /**
+     * A react hook or a simple function that returns the selectable items.
+     *
+     * Supports suspended hooks.
+     *
+     * @returns the data to render in the selector.
+     */
+    useData: (props: {
+        filter?: string;
+        visibility?: SectionVisibility[];
+    }) => PropsUseData<T>;
+}
+interface SelectorProps<T> {
+    selectorConfig: SelectorConfig<T>;
+    inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>;
+    favorite?: Favorite<T>;
+}
+export declare const Selector: <T>({ inputRef, selectorConfig, favorite }: SelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Selector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AAEvE,OAAO,KAAK,EAAE,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAA;AAQpF,KAAK,iBAAiB,GAAI,oBAAoB,GAAG,mBAAmB,CAAA;AACpE,KAAK,gBAAgB,GAAG,GAAG,GAAG,GAAG,CAAA;AASjC,UAAU,QAAQ,CAAC,CAAC;IAClB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAsBD,UAAU,YAAY,CAAC,CAAC;IACtB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAc,CAAC,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,UAAU,EAAE,MAAM,CAAC,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B;;;;;;OAMG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAA;KAAC,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC;CAC1F;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACxB;AAgHD,eAAO,MAAM,QAAQ,GAAI,CAAC,0CAA4C,aAAa,CAAC,CAAC,CAAC,4CA+ErF,CAAA"}

package/dist/components/Selector/index.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FallbackBoundary, IconLink, Text } from '@stack-spot/citric-react';
+import { useKeyboardControls } from '@stack-spot/portal-components';
+import { InfiniteScroll } from '@stack-spot/portal-components/InfiniteScroll';
+import { interpolate, useTranslate } from '@stack-spot/portal-translate';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { debounce } from 'lodash';
+import { useCurrentChatState, useWidgetState } from '../../context/hooks.js';
+import { getUrlToStackSpotAI } from '../../utils/url.js';
+import { ButtonFavorite } from '../ButtonFavorite.js';
+import { Fading } from '../Fading.js';
+import { SelectorBox } from './styled.js';
+const ListItem = ({ item, selectorConfig, onSelect, favorite }) => {
+    const t = useTranslate(dictionary);
+    const { urlBuilder, renderComponentItem } = selectorConfig;
+    const linkTitle = interpolate(t.open, item.slug);
+    const listFavorites = favorite?.useFavorites?.();
+    return (_jsxs("li", { children: [_jsx("button", { className: "selector", onClick: () => onSelect(item), onKeyDown: (e) => e.key === 'Enter' && e.preventDefault(), onFocus: (e) => e.target.closest('li')?.classList.add('focus'), onBlur: (e) => e.target.closest('li')?.classList.remove('focus'), children: renderComponentItem(item) }), _jsx(IconLink, { icon: "ExternalLink", title: linkTitle, "aria-label": linkTitle, href: `${getUrlToStackSpotAI()}${urlBuilder(item)}`, target: "_blank" }), _jsx(ButtonFavorite, { appearance: "text", favorite: { ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites } })] }));
+};
+const List = ({ selectorConfig, filter, visibility, onSelect, favorite }) => {
+    const t = useTranslate(dictionary);
+    const { data: items, fetchNextPage, hasNextPage } = selectorConfig.useData({ filter, visibility: visibility ? [visibility] : undefined });
+    if (!items.length && !filter)
+        return _jsx(Text, { className: "empty", color: "light.700", children: interpolate(t.noData, selectorConfig.resourceName) });
+    if (!items?.length)
+        return _jsx(Text, { className: "empty", color: "light.700", children: interpolate(t.noResults, selectorConfig.resourceName) });
+    return (_jsx("ul", { className: "selector-list", id: "selector-list", children: _jsx(InfiniteScroll, { scrollableTarget: "selector-list", dataLength: items?.length ?? 0, next: fetchNextPage ?? undefined, hasMore: hasNextPage ?? false, children: items?.map((item, i) => (_jsx(ListItem, { item: item, selectorConfig: selectorConfig, onSelect: onSelect, favorite: favorite }, `${item.id}${item.visibility_level}${i}`))) }) }));
+};
+const SelectorContent = ({ filter, onClose, selectorConfig, favorite }) => {
+    const t = useTranslate(dictionary);
+    const ref = useRef(null);
+    const [visibility, setVisibility] = useState();
+    const isGroupResourcesByScope = useWidgetState('features')?.groupResourcesByScope;
+    const { resourceName, icon, onSelect, sections } = selectorConfig;
+    const onSelectItem = useCallback((slug) => {
+        onSelect(slug);
+        onClose();
+    }, []);
+    useKeyboardControls({
+        querySelectors: '.tabs button, button.selector',
+        disableTabBehavior: true,
+        onPressEscape: onClose,
+        onPressArrowLeft: () => ref.current?.querySelector('.tabs button.active')?.focus(),
+        onPressArrowRight: () => ref.current?.querySelector('button.selector')?.focus(),
+        ref,
+    }, []);
+    function createSectionItem(action) {
+        return (_jsx("li", { children: _jsx("button", { className: visibility === action ? 'active' : '', onFocus: () => setVisibility(action), children: t[action?.toLowerCase() ?? 'all'] }) }, action ?? 'all'));
+    }
+    return (_jsxs("div", { ref: ref, children: [_jsxs("header", { children: [icon, _jsx(Text, { tag: "h3", children: resourceName })] }), _jsxs("div", { className: "body", children: [isGroupResourcesByScope && (_jsxs("ul", { className: "tabs", children: [createSectionItem(), sections.map(createSectionItem)] })), _jsx(FallbackBoundary, { message: interpolate(t.error, selectorConfig.resourceName), children: _jsx(List, { filter: filter, visibility: visibility, selectorConfig: selectorConfig, onSelect: onSelectItem, favorite: favorite }) })] })] }));
+};
+export const Selector = ({ inputRef, selectorConfig, favorite }) => {
+    const { shortcut, regex, isEnabled } = selectorConfig;
+    const [isClosed, setClosed] = useState(false);
+    const selectorRef = useRef(null);
+    const [debouncedFilter, setDebouncedFilter] = useState(undefined);
+    const value = useCurrentChatState('nextMessage') ?? '';
+    const filter = useMemo(() => value === shortcut || regex.test(value) ? value.substring(1) : undefined, [value]);
+    const shouldRender = isEnabled && filter !== undefined && !isClosed;
+    const debouncedSetFilter = useCallback(debounce((filterValue) => {
+        setDebouncedFilter(filterValue);
+    }, 300), []);
+    useEffect(() => {
+        debouncedSetFilter(filter);
+        return () => {
+            debouncedSetFilter.cancel();
+        };
+    }, [filter, debouncedSetFilter]);
+    // Resets the closed state whenever the message input is cleared
+    useEffect(() => {
+        if (!value)
+            setClosed(false);
+    }, [value]);
+    // Creates the following behavior while the user types in the message input:
+    // auto-complete on tab; move focus to the resource panel on press up or down; and close the resource panel on esc.
+    useEffect(() => {
+        function getFirst() {
+            return selectorRef.current?.querySelector('.selector');
+        }
+        function onKeyDown(event) {
+            const key = event.key;
+            if (!selectorRef.current)
+                return;
+            if (key === 'Tab') {
+                getFirst()?.click();
+                event.preventDefault();
+            }
+            else if (key === 'ArrowDown' || key === 'ArrowUp') {
+                getFirst()?.focus();
+                event.preventDefault();
+            }
+            if (key === 'Escape') {
+                setClosed(true);
+            }
+        }
+        inputRef.current?.addEventListener('keydown', onKeyDown);
+        return () => inputRef.current?.removeEventListener('keydown', onKeyDown);
+    }, []);
+    // Closes the panel when the user clicks outside the panel or the message input.
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        function onClickOut(e) {
+            const target = e.target;
+            if (!selectorRef.current?.contains(target) && !inputRef.current?.contains(target))
+                setClosed(true);
+        }
+        document.addEventListener('click', onClickOut);
+        return () => document.removeEventListener('click', onClickOut);
+    }, [shouldRender]);
+    return (_jsx(SelectorBox, { "$tabsCount": selectorConfig.sections.length, children: _jsx(Fading, { visible: shouldRender, ref: selectorRef, className: "box-selector", children: _jsx(SelectorContent, { favorite: favorite, selectorConfig: selectorConfig, filter: debouncedFilter, onClose: () => setClosed(true), inputRef: inputRef }) }) }));
+};
+const dictionary = {
+    en: {
+        all: 'All',
+        personal: 'Personal',
+        account: 'Account',
+        shared: 'Shared',
+        'built_in': 'Built-in',
+        'recently_used': 'Recent',
+        workspace: 'Spot',
+        error: 'Could not load the $0s.',
+        noData: 'You don\'t have any $0 yet.',
+        noResults: 'There are no $0s to show here.',
+        open: 'Open this $0 settings in a new tab.',
+        favorite: 'Favorites',
+    },
+    pt: {
+        all: 'Todos',
+        personal: 'Pessoal',
+        account: 'Conta',
+        shared: 'Compartilhado',
+        workspace: 'Spot',
+        'built_in': 'Embutido',
+        'recently_used': 'Recente',
+        error: 'Não foi possível carregar os $0s.',
+        noData: 'Você ainda não possui $0s.',
+        noResults: 'Não $0s para mostrar aqui.',
+        open: 'Abra as configurações deste $0 em uma nova aba.',
+        favorite: 'Favoritos',
+    },
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Selector/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const SelectorBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $tabsCount: number;
+}>> & string;
+//# sourceMappingURL=styled.d.ts.map

package/dist/components/Selector/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/Selector/styled.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW;gBAA4B,MAAM;YAyJzD,CAAA"}

package/dist/components/Selector/styled.js

@@ -0,0 +1,157 @@
+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;
+          }
+        }
+      }
+    }
+  }
+`;
+//# 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"}

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

@@ -29,6 +29,12 @@ interface Props<T, Key extends React.Key> {
      */
     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

@@ -1 +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;AA0HD,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,2CAgDvF"}
+{"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

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* Tabs to select chat and add new chats */
-import { TimesMini } from '@citric/icons';
-import { IconButton } from '@citric/ui';
+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%;
@@ -34,14 +36,6 @@ const Tabs = styled.nav `
     }
   }
 
-  ${IconButton} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border: none;
-  }
-
   .list-overflow {
     max-width: ${({ $numberOfExtraButtons }) => `calc(100% - ${$numberOfExtraButtons * (EXTRA_BTN_SIZE + EXTRA_BTN_MARGIN * 2)}px)`};
   }
@@ -108,24 +102,15 @@ const Tabs = styled.nav `
           mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
         }
       }
-
-      ${IconButton} {
-        padding: 0;
-        width: 18px;
-        height: 18px;
-        transition: background-color 0.3s;
-
-        svg {
-          height: 14px;
-        }
-
-        &:hover {
-          background-color: ${theme.color.light[600]};
-        }
-      }
     }
   }
 `;
+/**
+ * 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);
@@ -135,8 +120,11 @@ export function TabManager({ active, tabs, keygen, onRemove, onSelect, renderLab
         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, { "aria-label": t.close, title: t.close, onClick: () => onRemove(tab), children: _jsx(TimesMini, {}) })] }, keygen(tab)))), [tabs, active]);
-    const extras = useMemo(() => buttons.map(({ label, onClick, icon, className, style }) => (_jsx(IconButton, { "aria-label": label, title: label, className: listToClass([className, 'extra']), style: style, onClick: onClick, children: icon }, label))), [buttons]);
+    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) {
@@ -145,7 +133,7 @@ export function TabManager({ active, tabs, keygen, onRemove, onSelect, renderLab
         }
         lastNumberOfTabs.current = tabs.length;
     }, [tabs]);
-    return (_jsxs(Tabs, { "$numberOfExtraButtons": buttons.length, children: [_jsx(FadingOverflow, { className: "list-overflow", scroll: "arrows", enableHorizontalScrollWithVerticalWheel: true, children: _jsx("ul", { ref: tabList, children: tabItems }) }), extras] }));
+    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: {