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

package/dist/views/MessageInput/styled.js

@@ -0,0 +1,341 @@
+import { Flex } from '@citric/core';
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+const CONTEXT_BAR_HEIGHT = 38;
+const CONTEXT_BAR_DISPLACEMENT = 4;
+const UPLOAD_BAR_HEIGHT = 60;
+const UPLOAD_BAR_DISPLACEMENT = 4;
+export const MIN_INPUT_HEIGHT = 24;
+export const SelectionBarWrapper = styled.div `
+  display: inline-flex;
+  justify-content: space-between;
+  position: relative;
+  padding: 8px;
+  background-color: ${theme.color.light[500]};
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top: none;
+
+  .selection-list {
+    opacity: 0;
+    transition: height 0.4s, opacity 0.3s;
+  }
+  .visible {
+    opacity: 1;
+  }
+
+  .selection-list-content {
+    background-color: ${theme.color.light[500]};
+  }
+  
+  ul { 
+    list-style: none;
+    padding: 0;
+    margin: 12px;
+    min-width: 225px;
+  }
+  li {
+    cursor: pointer;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+    &:hover {
+      background-color: ${theme.color.light[600]}
+    }
+    a:hover {
+      background-color: ${theme.color.light[600]}
+    }
+  }
+`;
+export const MessageInputBox = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  > .info-bar {
+    position: relative;
+    overflow: hidden;
+
+    &.visible {
+      > .space {
+        height: var(--space-height, 'auto');
+      }
+    }
+
+    > .aria-live {
+       position: absolute;
+       width: 1px;
+       height: 1px;
+       margin: -1px;
+       padding: 0;
+       overflow: hidden;
+       clip: rect(0 0 0 0);
+       white-space: nowrap;
+       border: 0;
+    }
+
+    > .space {
+      height: 0;
+      transition: height 0.4s;
+    }
+
+    > .content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: var(--content-height, 'auto');
+      padding-top: 8px;
+      background-color: ${theme.color.light[500]};
+      display: flex;
+      flex-direction: row;
+      gap: 4px;
+
+      .list-overflow {
+        max-width: calc(100% - var(--list-margins, 0px));
+        height: 24px;
+        &:first-child {
+          margin-left: 0.25rem; // space added to the left when the close all button isn't rendered
+        }
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 6px;
+      }
+    }
+  }
+
+  > .context-bar {
+    --space-height: ${CONTEXT_BAR_HEIGHT - CONTEXT_BAR_DISPLACEMENT}px;
+    --content-height: ${CONTEXT_BAR_HEIGHT}px;
+    --list-margins: 30px; // close button width + gap
+
+    .context-badge > span {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4px;
+      line-height: 0.75rem;
+      white-space: nowrap;
+
+      /* $ {IconButton} {
+        padding: 4px 0;
+        background: none;
+        border: none;
+        width: auto;
+        height: auto;
+
+        svg {
+          width: auto;
+          height: 12px;
+        }
+      } */
+    }
+  }
+
+  > .upload-bar {
+    --space-height: ${UPLOAD_BAR_HEIGHT - UPLOAD_BAR_DISPLACEMENT}px;
+    --content-height: ${UPLOAD_BAR_HEIGHT}px;
+    --list-margins: 12px; // margins from .list-overflow
+
+    .list-overflow {
+      margin: 0 6px !important;
+      .scroll-to-left, .scroll-to-right {
+        top: 11px;
+      }
+    }
+
+    input[type="file"] {
+      display: none;
+    }
+  }
+
+  .wrapper-action {
+    position: relative;
+
+    .action-box {
+      display: flex;
+      position: relative;
+      flex-direction: row;
+      gap: 8px;
+      align-items: end;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border: 2px solid ${theme.color.light[300]};
+      
+      background-color: ${theme.color.light[300]};
+      padding: 10px 8px;
+      transition: border-color 0.3s, background-color 0.3s;
+    }
+  }
+
+  [data-citric="progress-bar"] {
+    background-color: ${theme.color.light[500]};
+    border: 0;
+    padding: 0;
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 1px;
+
+    button {
+      border: none;
+      border-radius: 2px;
+      transition: background-color 0.2s, opacity 0.2s;
+      padding: 0;
+
+      &.agent {
+        border-radius: 50%; 
+        opacity: 1;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .feature-buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      white-space: nowrap;
+      flex-wrap: nowrap;
+      transition: width 0.3s;
+      gap: 4px;
+      overflow-x: hidden;
+
+      &.expanded {
+        /* lets the overflow be hidden only when opened or not animated */
+        overflow-x: visible;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-x: hidden;
+          }
+          99% {
+            overflow-x: hidden;
+          }
+          100% {
+            overflow-x: visible;
+          }
+        }
+      }
+    }
+
+    /* $ {IconButton} {
+      width: 24px;
+      height: 24px;
+    } */
+
+    .group-agent {
+      display: flex;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;     
+      
+        button  {
+          margin-right: -0.5rem;
+          margin-left: -0.5rem;
+          border-radius: 50%;
+          background-color: ${theme.color.light[300]};
+          border: 1px solid ${theme.color.light[600]};
+          display: flex;
+
+          &.agent-selected:hover:before  {
+            content: '';
+            width: 22px;
+            height: 22px;
+            position: absolute;
+            background-color: ${theme.color.light[300]};
+            border-radius: 100%;
+            opacity: 0.4;
+          }
+
+          .icon-remove {
+            display: none;
+            fill: ${theme.color.light.contrastText};
+            position: absolute;          
+          }   
+
+          &:hover .icon-remove {
+            display: flex;            
+          }
+
+          .image {
+            margin: 1px;        
+          }
+      }
+    }
+  }
+
+  .message-menu {
+    position: absolute;
+    bottom: 34px;
+    .upload-item {
+      border-top: 1px solid ${theme.color.light[600]};
+    }
+  }
+
+  textarea {
+    resize: none;
+    border: none;
+    flex: 1;
+    padding: 0;
+    height: ${MIN_INPUT_HEIGHT}px;
+    padding: 0;
+    transition: height 0.3s;
+    background-color: transparent;
+    &:focus {
+      box-shadow: none !important;
+    }
+    &:disabled {
+      background-color: transparent !important;
+      opacity: 0.6;
+    }
+  }
+`;
+export const stylesModelSwitcher = {
+    selection: {
+        minHeight: '300px',
+        position: 'absolute',
+        bottom: 'calc(100% + 10px)',
+        right: '0',
+        margin: '0',
+    },
+};
+export const RowWrapperStyled = styled(Flex) `
+  width: 100%;
+  justify-content: end;
+  margin-right: 4px;
+  ul {
+    margin: 0;
+  }
+  .button-select-model {
+    border-radius: 15px !important;
+  }
+  #menuModelSwitcher {
+    background-color: ${theme.color.light[500]};
+  }
+
+  .selection-list-content {
+    .action :hover {
+      cursor: pointer;
+      background-color: ${theme.color.light[600]};
+    }
+    ul :hover {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/views/MessageInput/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAC7B,MAAM,wBAAwB,GAAG,CAAC,CAAA;AAClC,MAAM,iBAAiB,GAAG,EAAE,CAAA;AAC5B,MAAM,uBAAuB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;sBAKvB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;wBAcpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;0BAgBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;0BAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAG/C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsCf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0B1B,kBAAkB,GAAG,wBAAwB;wBAC3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA2BpB,iBAAiB,GAAG,uBAAuB;wBACzC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0Bf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;0BAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;wBAOxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAuEhB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;8BAmBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;cAStC,gBAAgB;;;;;;;;;;;;CAY7B,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS,EAAE;QACT,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ;CACF,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;wBAWpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;0BAMpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;CAO/C,CAAA"}

package/dist/views/MinimizedHeader.d.ts

@@ -0,0 +1,7 @@
+import { MinimizedActions } from '../types.js';
+/**
+ * When the chat is minimized, there's no chat selection, i.e. the tabs are not rendered. In place of the tabs this header with the current
+ * chat name and buttons to collapse and close is rendered.
+ */
+export declare const MinimizedHeader: ({ onClose, onCollapse, onExpand }: MinimizedActions) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MinimizedHeader.d.ts.map

package/dist/views/MinimizedHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimizedHeader.d.ts","sourceRoot":"","sources":["../../src/views/MinimizedHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAyC3C;;;GAGG;AACH,eAAO,MAAM,eAAe,sCAAuC,gBAAgB,4CA4BlF,CAAA"}

package/dist/views/MinimizedHeader.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, Text } from '@stack-spot/citric-react';
+import { listToClass } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useCallback, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+import { FadingOverflow } from '../components/FadingOverflow.js';
+import { useCurrentChatState } from '../context/hooks.js';
+const Header = styled.header `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 18px;
+  height: 48px;
+  padding: 0 20px;
+  max-width: 1200px;
+  width: calc(100% - 40px);
+
+  .title {
+    flex: 1;
+    white-space: nowrap;
+    max-width: calc(100% - 78px); // size of the button-group + gap
+    height: 15px; // fixes weird problem where the text has 14px instead of 15px of height
+    line-height: 1;
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 18px;
+  }
+
+  .collapse {
+    background-color: transparent;
+    border-color: transparent;
+    padding: 0;
+    width: auto;
+    height: auto;
+    transition: transform 0.3s;
+
+    &.collapsed {
+      transform: rotate(-180deg);
+    }
+  }
+`;
+/**
+ * When the chat is minimized, there's no chat selection, i.e. the tabs are not rendered. In place of the tabs this header with the current
+ * chat name and buttons to collapse and close is rendered.
+ */
+export const MinimizedHeader = ({ onClose, onCollapse, onExpand }) => {
+    const t = useTranslate(dictionary);
+    const label = useCurrentChatState('label');
+    const [collapsed, setCollapsed] = useState(false);
+    const ref = useRef(null);
+    const showButtons = onClose || onCollapse || onExpand;
+    const toggleCollapsed = useCallback(() => {
+        if (collapsed)
+            onExpand?.();
+        else
+            onCollapse?.();
+        setCollapsed(!collapsed);
+    }, [collapsed]);
+    return (_jsxs(Header, { ref: ref, className: "minimized-header", children: [_jsx(FadingOverflow, { className: "title", children: _jsx(Text, { title: label, children: label }) }), showButtons && _jsxs("div", { className: "button-group", children: [(onExpand || onCollapse) && _jsx(IconButton, { icon: "ChevronDown", title: collapsed ? t.expand : t.collapse, "aria-label": collapsed ? t.expand : t.collapse, className: listToClass(['collapse', collapsed && 'collapsed']), onClick: toggleCollapsed }), onClose && _jsx(IconButton, { icon: "Times", title: t.close, "aria-label": t.close, onClick: onClose })] })] }));
+};
+const dictionary = {
+    en: {
+        collapse: 'Minimize',
+        expand: 'Expand',
+        close: 'Close',
+    },
+    pt: {
+        collapse: 'Minimizar',
+        expand: 'Expandir',
+        close: 'Fechar',
+    },
+};
+//# sourceMappingURL=MinimizedHeader.js.map

package/dist/views/MinimizedHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimizedHeader.js","sourceRoot":"","sources":["../../src/views/MinimizedHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAGtD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC3B,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAoB,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,KAAK,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IACrC,MAAM,WAAW,GAAG,OAAO,IAAI,UAAU,IAAI,QAAQ,CAAA;IAErD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,SAAS;YAAE,QAAQ,EAAE,EAAE,CAAA;;YACtB,UAAU,EAAE,EAAE,CAAA;QACnB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,kBAAkB,aAC5C,KAAC,cAAc,IAAC,SAAS,EAAC,OAAO,YAAC,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YAAG,KAAK,GAAQ,GAAiB,EACpF,WAAW,IAAI,eAAK,SAAS,EAAC,cAAc,aAC1C,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,KAAC,UAAU,IACtC,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,gBAC5B,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAC7C,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,IAAI,WAAW,CAAC,CAAC,EAC9D,OAAO,EAAE,eAAe,GACxB,EACD,OAAO,IAAI,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,CAAC,CAAC,KAAK,gBAAc,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,IAC1F,IACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}

package/dist/views/Resources.d.ts

@@ -0,0 +1,2 @@
+export declare const Resources: () => null;
+//# sourceMappingURL=Resources.d.ts.map

package/dist/views/Resources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resources.d.ts","sourceRoot":"","sources":["../../src/views/Resources.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,YAerB,CAAA"}

package/dist/views/Resources.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, Column, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react';
+import { agentToolsClient } from '@stack-spot/portal-network';
+import { theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useEffect, useMemo } from 'react';
+import { styled } from 'styled-components';
+import { useWidget, useWidgetState } from '../context/hooks.js';
+import { useRightPanel } from '../right-panel/hooks.js';
+import { toolById } from '../utils/tools.js';
+import { AgentDescription } from './Agents/AgentDescription.js';
+export const Resources = () => {
+    const t = useTranslate(dictionary);
+    const panel = useWidgetState('panel');
+    const message = useWidgetState('currentMessageInPanel');
+    const { open } = useRightPanel();
+    const widget = useWidget();
+    useEffect(() => {
+        if (panel === 'resources' && message)
+            open(_jsx(ResourcesPanel, {}, message.messageId), { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) });
+    }, [panel, t]);
+    return null;
+};
+const StyledAccordion = styled(Accordion) `
+  padding: 8px;
+  margin: 8px;
+  &[data-citric="accordion"] {
+    background-color: ${theme.color.light[400]};
+  }
+  label {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+`;
+const ResourcesPanel = () => {
+    const { chatId, messageId } = useWidgetState('currentMessageInPanel') ?? {};
+    const widget = useWidget();
+    const message = useMemo(() => {
+        const chat = widget.chatTabs.getAll().find(c => c.id === chatId);
+        return chat?.getMessages().find(m => m.id === messageId)?.getValue();
+    }, [messageId]);
+    const [agent] = agentToolsClient.agentV2.useStatefulQuery({
+        agentCoreId: message?.agent?.id || '', versionNumber: message?.agent?.agent_version_number
+    }, { enabled: !!message?.agent?.id });
+    const toolkits = useMemo(() => [
+        ...agent?.version?.toolkits?.builtin_toolkits ?? [],
+        ...agent?.version?.toolkits?.custom_toolkits ?? [],
+        ...agent?.version?.toolkits?.mcp_toolkits ?? [],
+    ], [agent]);
+    const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolkits)), [messageId, toolkits]);
+    const agentsSearch = message?.tools?.map((id) => ({ agent_core_id: id })) ?? [];
+    const [agentsTools] = agentToolsClient.agentsByIdsV2.useStatefulQuery({ searchAgentsRequestV2: { agents: agentsSearch } });
+    const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId]);
+    const header = (image, label) => (_jsxs(Row, { children: [_jsx(ImageBox, { children: _jsx(ImageWithFallback, { src: image, fallback: _jsx(Icon, { icon: "Agent" }), "aria-label": label, title: label }) }), _jsx(Text, { style: { marginLeft: '8px' }, children: label })] }));
+    return !!tools?.length && (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: tools.map((tool) => tool && (_jsx(StyledAccordion, { header: header(tool?.image, tool?.name), appearance: "card", maxHeight: 120, children: tool?.description }, tool.id))) }), hasAgentTool &&
+                _jsx(Column, { children: message?.tools?.map((id) => {
+                        const agentTool = agentsTools?.find((agent) => agent.id === id);
+                        return (_jsx(StyledAccordion, { header: header(agentTool?.avatar || undefined, agentTool?.name), children: _jsx(Row, { children: _jsx(AgentDescription, { agentId: id }) }) }, agentTool?.id));
+                    }) })] }));
+};
+const dictionary = {
+    en: {
+        title: 'Resources',
+        description: 'These are the resources used to generate this answer.',
+    },
+    pt: {
+        title: 'Recursos',
+        description: 'Esses são os recursos usados pra gerar essa resposta.',
+    },
+};
+//# sourceMappingURL=Resources.js.map

package/dist/views/Resources.js.map

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

package/dist/views/Stacks.d.ts

@@ -0,0 +1,14 @@
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai';
+import { ChatProperties } from '../state/ChatState.js';
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export declare const Stacks: () => null;
+export interface StacksTabProps {
+    visibility?: VisibilityLevelEnum;
+    workspaceId?: string;
+    stack: React.MutableRefObject<ChatProperties['stack']>;
+    showSubmitButton?: boolean;
+}
+export declare const StacksTab: ({ visibility, workspaceId, stack, showSubmitButton }: StacksTabProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Stacks.d.ts.map

package/dist/views/Stacks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stacks.d.ts","sourceRoot":"","sources":["../../src/views/Stacks.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AAYvE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGnD;;GAEG;AACH,eAAO,MAAM,MAAM,YAclB,CAAA;AA0CD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,yDAAiE,cAAc,4CA8FpG,CAAA"}