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

package/dist/views/MessageInput/styled.js

@@ -1,25 +1,79 @@
-import { IconButton } from '@citric/ui';
+import { Flex } from '@citric/core';
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
-const INFO_BAR_HEIGHT = 42;
-const INFO_BAR_DISPLACEMENT = 4;
-export const MAX_INPUT_HEIGHT = 300;
+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 {
-    margin-top: 8px;
     position: relative;
     overflow: hidden;
 
     &.visible {
       > .space {
-        height: ${INFO_BAR_HEIGHT - INFO_BAR_DISPLACEMENT}px;
+        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;
@@ -30,18 +84,19 @@ export const MessageInputBox = styled.div `
       top: 0;
       left: 0;
       right: 0;
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-      height: ${INFO_BAR_HEIGHT}px;
-      padding: 0 4px;
+      height: var(--content-height, 'auto');
+      padding-top: 8px;
       background-color: ${theme.color.light[500]};
       display: flex;
       flex-direction: row;
-      align-items: center;
-      gap: 6px;
+      gap: 4px;
 
       .list-overflow {
-        max-width: calc(100% - 30px); // close button + gap
+        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 {
@@ -53,51 +108,79 @@ export const MessageInputBox = styled.div `
         align-items: center;
         gap: 6px;
       }
+    }
+  }
 
-      .info-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;
+  > .context-bar {
+    --space-height: ${CONTEXT_BAR_HEIGHT - CONTEXT_BAR_DISPLACEMENT}px;
+    --content-height: ${CONTEXT_BAR_HEIGHT}px;
+    --list-margins: 30px; // close button width + gap
 
-          svg {
-            width: auto;
-            height: 12px;
-          }
+    .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;
         }
-      }
+      } */
     }
   }
 
-  .action-box {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: end;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.light[500]};
-    background-color: ${theme.color.light[300]};
-    padding: 8px 10px;
-    transition: border-color 0.3s, background-color 0.3s;
+  > .upload-bar {
+    --space-height: ${UPLOAD_BAR_HEIGHT - UPLOAD_BAR_DISPLACEMENT}px;
+    --content-height: ${UPLOAD_BAR_HEIGHT}px;
+    --list-margins: 12px; // margins from .list-overflow
 
-    &.focused {
-      border-color: ${theme.color.primary[500]};
+    .list-overflow {
+      margin: 0 6px !important;
+      .scroll-to-left, .scroll-to-right {
+        top: 11px;
+      }
     }
 
-    &.disabled {
-      background-color: ${theme.color.light[500]};
+    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;
@@ -108,48 +191,18 @@ export const MessageInputBox = styled.div `
     button {
       border: none;
       border-radius: 2px;
-      opacity: 0.6;
       transition: background-color 0.2s, opacity 0.2s;
-      background-color: transparent;
       padding: 0;
 
-      svg {
-        fill: ${theme.color.light[700]};
-        width: 16px;
-        height: 16px;
-      }
-
-      &:hover {
-        background-color: ${theme.color.light[500]};
-      }
-
-      &.send {
-        background-color: ${theme.color.inverse[500]};
-        &:hover {
-          opacity: 1;
-        }
-        svg {
-          fill: ${theme.color.inverse.contrastText};
+      &.agent {
+        border-radius: 50%; 
+        opacity: 1;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
         }
       }
-
-      &.expand {
-        svg {
-          transition: transform 0.3s;
-        }
-      }
-
-      &.collapsed {
-        svg {
-          transform: rotate(180deg);
-        }
-      }
-
-      &.agent img {
-        width: 80%;
-        height: 80%;
-        border-radius: 50%;
-      }
     }
 
     .feature-buttons {
@@ -180,9 +233,56 @@ export const MessageInputBox = styled.div `
       }
     }
 
-    ${IconButton} {
+    /* $ {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]};
     }
   }
 
@@ -196,7 +296,45 @@ export const MessageInputBox = styled.div `
     transition: height 0.3s;
     background-color: transparent;
     &:focus {
-      box-shadow: none;
+      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;
     }
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;kBAWvB,eAAe,GAAG,qBAAqB;;;;;;;;;;;;;;;;gBAgBzC,eAAe;;0BAEL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4BtC,UAAU;;;;;;;;;;;;;;;;;;;;;;wBAsBI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;sBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;0BAIpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;gBAoBhC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;4BAMV,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;4BAItB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;kBAKlC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmD5C,UAAU;;;;;;;;;;;cAWF,gBAAgB;;;;;;;;CAQ7B,CAAA"}
+{"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

@@ -1,3 +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

@@ -1 +1 @@
-{"version":3,"file":"MinimizedHeader.d.ts","sourceRoot":"","sources":["../../src/views/MinimizedHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAwC3C,eAAO,MAAM,eAAe,sCAAuC,gBAAgB,4CA8BlF,CAAA"}
+{"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

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from '@citric/core';
-import { ChevronDown, Times } from '@citric/icons';
-import { IconButton } from '@citric/ui';
+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 { useChatState, useChatTabs } from '../context/hooks.js';
+import { useCurrentChatState } from '../context/hooks.js';
 const Header = styled.header `
   display: flex;
   flex-direction: row;
@@ -23,6 +21,7 @@ const Header = styled.header `
     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 {
@@ -45,10 +44,13 @@ const Header = styled.header `
     }
   }
 `;
+/**
+ * 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 { active } = useChatTabs();
-    const label = useChatState(active, 'label');
+    const label = useCurrentChatState('label');
     const [collapsed, setCollapsed] = useState(false);
     const ref = useRef(null);
     const showButtons = onClose || onCollapse || onExpand;
@@ -59,7 +61,7 @@ export const MinimizedHeader = ({ onClose, onCollapse, onExpand }) => {
             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, { title: collapsed ? t.expand : t.collapse, "aria-label": collapsed ? t.expand : t.collapse, className: listToClass(['collapse', collapsed && 'collapsed']), onClick: toggleCollapsed, children: _jsx(ChevronDown, {}) }), onClose && _jsx(IconButton, { title: t.close, "aria-label": t.close, onClick: onClose, children: _jsx(Times, {}) })] })] }));
+    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: {

package/dist/views/MinimizedHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinimizedHeader.js","sourceRoot":"","sources":["../../src/views/MinimizedHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,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,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG5D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC3B,CAAA;AAED,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,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAChC,MAAM,KAAK,GAAG,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC3C,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,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,YAExB,KAAC,WAAW,KAAG,GACJ,EACZ,OAAO,IAAI,KAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,gBAAc,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,YAAE,KAAC,KAAK,KAAG,GAAa,IACjG,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"}
+{"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,69 @@
+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.agent.useStatefulQuery({ agentId: message?.agent?.id || '' }, { enabled: !!message?.agent?.id });
+    const toolkits = useMemo(() => [
+        ...agent?.toolkits?.builtin_toolkits ?? [],
+        ...agent?.toolkits?.custom_toolkits ?? [],
+        ...agent?.toolkits?.mcp_toolkits ?? [],
+    ], [agent]);
+    const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolkits)), [messageId, toolkits]);
+    const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery({ searchAgentsRequest: { ids: message?.tools || [] } });
+    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

@@ -1,2 +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

@@ -1 +1 @@
-{"version":3,"file":"Stacks.d.ts","sourceRoot":"","sources":["../../src/views/Stacks.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,MAAM,YAclB,CAAA"}
+{"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"}