@stack-spot/ai-chat-widget 1.22.0-beta.4 → 1.22.0-beta.6

package/dist/StackspotAIWidget.d.ts

@@ -29,10 +29,14 @@ export interface AIWidgetProps extends WithStyle, CustomMessage {
      * A boolean indicating whether or not the chat should have a visible header.
      */
     hasHeader?: boolean;
+    /**
+     *  URL to redirect to the "Create Agent" page on the portal
+     */
+    urlCreateAgent?: string;
 }
 /**
  * Renders a Chat Widget according to the closest model found in the React tree (AIWidgetProvider). If no model is found, a global version
  * of the Chat Widget will be instantiated and used.
  */
-export declare const StackspotAIWidget: ({ username, initialAgents, minimizedActions, prefix, children, className, style, hasHeader, beforeMessage, afterMessage, }: AIWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StackspotAIWidget: ({ username, initialAgents, minimizedActions, prefix, children, className, style, hasHeader, beforeMessage, afterMessage, urlCreateAgent, }: AIWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StackspotAIWidget.d.ts.map

package/dist/StackspotAIWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackspotAIWidget.d.ts","sourceRoot":"","sources":["../src/StackspotAIWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAKjE,OAAO,cAAc,CAAA;AAGrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAcxD,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,aAAa;IAC7D;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+HAYzB,aAAa,4CAiDjB,CAAA"}
+{"version":3,"file":"StackspotAIWidget.d.ts","sourceRoot":"","sources":["../src/StackspotAIWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAKjE,OAAO,cAAc,CAAA;AAGrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAcxD,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,aAAa;IAC7D;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+IAazB,aAAa,4CAiDjB,CAAA"}

package/dist/StackspotAIWidget.js

@@ -26,7 +26,7 @@ import { Workspaces } from './views/Workspaces/index.js';
  * Renders a Chat Widget according to the closest model found in the React tree (AIWidgetProvider). If no model is found, a global version
  * of the Chat Widget will be instantiated and used.
  */
-export const StackspotAIWidget = ({ username, initialAgents, minimizedActions = {}, prefix, children, className, style, hasHeader = true, beforeMessage, afterMessage, }) => {
+export const StackspotAIWidget = ({ username, initialAgents, minimizedActions = {}, prefix, children, className, style, hasHeader = true, beforeMessage, afterMessage, urlCreateAgent, }) => {
     const rightPanelRef = useRef(null);
     const chatWindowRef = useRef(null);
     const currentChat = useCurrentChatMessages();
@@ -37,7 +37,7 @@ export const StackspotAIWidget = ({ username, initialAgents, minimizedActions =
     return useMemo(() => (_jsx(FallbackBoundary, { children: _jsx(TooltipProvider, { children: _jsx(RightPanelProvider, { chatWindow: chatWindowRef, panel: rightPanelRef, children: _jsxs("div", { className: listToClass(['ai-chat-widget', isMinimized && 'minimized', className]), translate: "no", style: style, children: [_jsxs("div", { className: "chat-window", ref: chatWindowRef, children: [hasHeader && _jsx(_Fragment, { children: isMinimized
                                         ? _jsx(MinimizedHeader, { ...minimizedActions })
                                         : _jsx(ChatTabSelection, {}) }), _jsxs("div", { className: "chat-container", children: [_jsxs("div", { className: "chat-content", children: [prefix, isCurrentChatEmpty
-                                                    ? (children ?? _jsx(Home, { username: username, initialAgents: initialAgents }))
+                                                    ? (children ?? _jsx(Home, { username: username, initialAgents: initialAgents, urlCreateAgent: urlCreateAgent }))
                                                     : _jsx(Chat, { username: username, beforeMessage: beforeMessage, afterMessage: afterMessage })] }), features.messageInput && _jsx(MessageInput, {})] })] }), _jsx(Stacks, {}), !isTrial && _jsx(Workspaces, {}), _jsx(KnowledgeSources, {}), _jsx(KSDocument, {}), _jsx(Agents, {}), _jsx(Editor, {}), _jsx(ChatHistory, {}), _jsx(Steps, {}), _jsx(Tools, {}), _jsx("div", { className: "chat-right-panel", ref: rightPanelRef, children: _jsx(RightPanel, {}) })] }) }) }) })), [isCurrentChatEmpty, username, isMinimized, children, initialAgents]);
 };
 //# sourceMappingURL=StackspotAIWidget.js.map

package/dist/StackspotAIWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackspotAIWidget.js","sourceRoot":"","sources":["../src/StackspotAIWidget.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StackspotAIWidget.js","sourceRoot":"","sources":["../src/StackspotAIWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAa,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAC7F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAGrE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAkC/C;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EACE,QAAQ,EACR,aAAa,EACb,gBAAgB,GAAG,EAAE,EACrB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,aAAa,EACb,YAAY,EACZ,cAAc,GACA,EAChB,EAAE;IACF,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAClD,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAClD,MAAM,WAAW,GAAG,sBAAsB,EAAE,CAAA;IAC5C,MAAM,WAAW,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;IACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAM,KAAK,CAAC,CAAA;IACnD,MAAM,OAAO,GAAG,YAAY,EAAE,CAAA;IAC9B,MAAM,QAAQ,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAEhD,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CACnB,KAAC,gBAAgB,cACf,KAAC,eAAe,cACd,KAAC,kBAAkB,IAAC,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,YACjE,eAAK,SAAS,EAAE,WAAW,CAAC,CAAC,gBAAgB,EAAE,WAAW,IAAI,WAAW,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,aACjH,eAAK,SAAS,EAAC,aAAa,EAAC,GAAG,EAAE,aAAa,aAC5C,SAAS,IAAG,4BACV,WAAW;wCACV,CAAC,CAAC,KAAC,eAAe,OAAK,gBAAgB,GAAI;wCAC3C,CAAC,CAAC,KAAC,gBAAgB,KAAG,GAEvB,EAEH,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,cAAc,aAC1B,MAAM,EACN,kBAAkB;oDACjB,CAAC,CAAC,CAAC,QAAQ,IAAI,KAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,GAAI,CAAC;oDAC1G,CAAC,CAAC,KAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,GAAI,IAEtF,EACL,QAAQ,CAAC,YAAY,IAAI,KAAC,YAAY,KAAG,IACtC,IACF,EACN,KAAC,MAAM,KAAG,EACT,CAAC,OAAO,IAAI,KAAC,UAAU,KAAG,EAC3B,KAAC,gBAAgB,KAAG,EACpB,KAAC,UAAU,KAAG,EACd,KAAC,MAAM,KAAG,EACV,KAAC,MAAM,KAAG,EACV,KAAC,WAAW,KAAG,EACf,KAAC,KAAK,KAAG,EACT,KAAC,KAAK,KAAG,EACT,cAAK,SAAS,EAAC,kBAAkB,EAAC,GAAG,EAAE,aAAa,YAAE,KAAC,UAAU,KAAG,GAAM,IACtE,GACa,GACL,GACD,CACpB,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAA;AAC1E,CAAC,CAAA"}

package/dist/app-metadata.json

@@ -1,7 +1,7 @@
 {
     "name": "@stack-spot/ai-chat-widget",
-    "version": "1.22.0-beta.4",
-    "date": "Tue May 27 2025 19:19:09 GMT-0300 (Horário Padrão de Brasília)",
+    "version": "1.22.0-beta.6",
+    "date": "Wed May 28 2025 11:45:22 GMT-0300 (Horário Padrão de Brasília)",
     "dependencies": [
         {
             "name": "@stack-spot/app-metadata",

package/dist/components/AgentCard/AgentCardCreate.d.ts

@@ -0,0 +1,4 @@
+export declare const AgentCardCreate: ({ urlCreateAgent }: {
+    urlCreateAgent: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AgentCardCreate.d.ts.map

package/dist/components/AgentCard/AgentCardCreate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentCardCreate.d.ts","sourceRoot":"","sources":["../../../src/components/AgentCard/AgentCardCreate.tsx"],"names":[],"mappings":"AA6BA,eAAO,MAAM,eAAe,uBAAwB;IAAE,cAAc,EAAE,MAAM,CAAA;CAAG,4CAc9E,CAAA"}

package/dist/components/AgentCard/AgentCardCreate.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox, Text } from '@citric/core';
+import { PlusMini } from '@citric/icons';
+import { theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { styled } from 'styled-components';
+import { dictionary } from './dictionary.js';
+const StyledCard = styled.a `
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid ${theme.color.light[600]};
+  text-decoration:none;
+
+  &:hover {
+    background-color: ${theme.color.light[500]};
+  }
+
+  .text-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    color: ${theme.color.light['contrastText']}
+  }
+`;
+export const AgentCardCreate = ({ urlCreateAgent }) => {
+    const t = useTranslate(dictionary);
+    return (_jsxs(StyledCard, { href: urlCreateAgent, role: "link", tabIndex: 0, className: 'agent-card', children: [_jsx(IconBox, { color: "light", appearance: "square", size: "md", children: _jsx(PlusMini, {}) }), _jsx("div", { className: "text-box", children: _jsx(Text, { appearance: "body2", children: t.create }) })] }));
+};
+//# sourceMappingURL=AgentCardCreate.js.map

package/dist/components/AgentCard/AgentCardCreate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentCardCreate.js","sourceRoot":"","sources":["../../../src/components/AgentCard/AgentCardCreate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;sBAOL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;wBAIpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;aAOjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC;;CAE7C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,cAAc,EAA+B,EAAE,EAAE;IACjF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,OAAO,CACL,MAAC,UAAU,IAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,aAChF,KAAC,OAAO,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,YAClD,KAAC,QAAQ,KAAG,GACJ,EACV,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,YACrB,CAAC,CAAC,MAAM,GACJ,GACH,IACK,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/components/AgentCard/dictionary.d.ts

@@ -5,6 +5,7 @@ export declare const dictionary: {
         account: string;
         shared: string;
         agent: string;
+        create: string;
     };
     pt: {
         builtin: string;
@@ -12,6 +13,7 @@ export declare const dictionary: {
         account: string;
         shared: string;
         agent: string;
+        create: string;
     };
 };
 //# sourceMappingURL=dictionary.d.ts.map

package/dist/components/AgentCard/dictionary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../src/components/AgentCard/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeD,CAAA"}
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../src/components/AgentCard/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;CAiBD,CAAA"}

package/dist/components/AgentCard/dictionary.js

@@ -5,6 +5,7 @@ export const dictionary = {
         account: 'Account',
         shared: 'Shared',
         agent: 'Agent',
+        create: 'Create',
     },
     pt: {
         builtin: 'Embutido',
@@ -12,6 +13,7 @@ export const dictionary = {
         account: 'Conta',
         shared: 'Compartilhado',
         agent: 'Agente',
+        create: 'Criar',
     },
 };
 //# sourceMappingURL=dictionary.js.map

package/dist/components/AgentCard/dictionary.js.map

@@ -1 +1 @@
-{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/components/AgentCard/dictionary.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,EAAE,EAAE;QACF,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/components/AgentCard/dictionary.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,EAAE,EAAE;QACF,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;KACjB;IACD,EAAE,EAAE;QACF,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,OAAO;KAChB;CACmB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,UAAU,GAAG,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;AAET,KAAK,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,GAC/C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACjC,UAAU,GACV;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1B,MAAM,WAAW,KAAM,SAAQ,YAAY;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6DD,eAAO,MAAM,IAAI,qHAUd,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG,KAAK,4CA+FpD,CAAA"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAQH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,MAAM,MAAM,UAAU,GAAG,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;AAET,KAAK,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,GAC/C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACjC,UAAU,GACV;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1B,MAAM,WAAW,KAAM,SAAQ,YAAY;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAkED,eAAO,MAAM,IAAI,qHAUd,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG,KAAK,4CA4HpD,CAAA"}

package/dist/components/Code.js

@@ -2,7 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 /**
  * Copied from the extension's webview.
  */
-import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons';
+import { Text } from '@citric/core';
+import { AddCode, ChevronDoubleDown, Collapse, Copy, Download } from '@citric/icons';
 import { IconButton } from '@citric/ui';
 import { theme, useThemeKind } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
@@ -10,6 +11,7 @@ import { useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js';
 import styled from 'styled-components';
+import { languages } from '../utils/programming-languages.js';
 const CodeBox = styled.code `
   background: ${theme.color.light[500]};
   border-radius: 6px;
@@ -31,23 +33,28 @@ const CodeBox = styled.code `
     }
   }
 
-  .action-bar {
+  .header-code {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     background: ${theme.color.light[600]};
     padding: 4px 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 
-    button {
-      background: transparent;
-      border: none;
-      opacity: 0.75;
-      transition: opacity 0.2s;
+    .action-bar {
+      display: flex;
+      flex-direction: row;
+     
+      button {
+        background: transparent;
+        border: none;
+        opacity: 0.75;
+        transition: opacity 0.2s;
 
-      &:hover {
-        opacity: 1;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
   }
@@ -74,6 +81,7 @@ export const Code = ({ className, onInsertCode, onNewFile, onCopyCode, language,
     const match = /language-(\w+)/.exec(className || '');
     const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt';
     const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim();
+    const languageExtension = languages.find(l => l.value === computedLanguage)?.extensions?.[0] ?? '.txt';
     function onClickInsert() {
         onInsertCode?.(content, computedLanguage);
     }
@@ -93,11 +101,28 @@ export const Code = ({ className, onInsertCode, onNewFile, onCopyCode, language,
     if (computedLanguage === 'txt') {
         return (_jsx("code", { ...props, className: className, children: children }));
     }
-    return (_jsxs(CodeBox, { className: ['code-box', themeKind, className].join(' '), children: [showActionBar && (_jsxs("div", { className: "action-bar", role: "toolbar", children: [_jsx(IconButton, { "aria-label": showLines ? t.hideLines : t.showLines, title: showLines ? t.hideLines : t.showLines, onClick: () => setShowLines(v => !v), style: { position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }, children: _jsx(Collapse, {}) }), _jsx(IconButton, { "aria-label": t.copy, title: t.copy, onClick: onClickCopy, style: { position: 'relative' }, children: _jsx(Copy, {}) }), onInsertCode
-                        ? (_jsx(IconButton, { "aria-label": t.insert, title: t.insert, onClick: onClickInsert, style: { position: 'relative' }, children: _jsx(ChevronDoubleDown, { style: { transform: 'rotate(90deg)' } }) }))
-                        : null, onNewFile
-                        ? (_jsx(IconButton, { "aria-label": t.newFile, title: t.newFile, onClick: onClickNewFile, style: { position: 'relative' }, children: _jsx(AddCode, {}) }))
-                        : null] })), _jsx("div", { children: _jsx(SyntaxHighlighter, { ...props, className: "highlighter", style: themeKind === 'dark' ? materialDark : vs, language: computedLanguage, PreTag: "div", showLineNumbers: showLines, lineNumberContainerStyle: lineNumbersStyle, lineNumberStyle: lineNumbersStyle, children: content }) })] }));
+    return (_jsxs(CodeBox, { className: ['code-box', themeKind, className].join(' '), children: [showActionBar && (_jsxs("div", { className: "header-code", children: [_jsx("div", { children: _jsx(Text, { appearance: "code2", children: computedLanguage ?? '' }) }), _jsxs("div", { className: "action-bar", role: "toolbar", children: [_jsx(IconButton, { "aria-label": showLines ? t.hideLines : t.showLines, title: showLines ? t.hideLines : t.showLines, onClick: () => setShowLines(v => !v), style: { position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }, children: _jsx(Collapse, {}) }), _jsx(IconButton, { "aria-label": t.downloadCode, title: t.downloadCode, onClick: () => {
+                                    try {
+                                        const extension = languageExtension;
+                                        const filename = `download${extension}`;
+                                        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+                                        const link = document.createElement('a');
+                                        link.href = URL.createObjectURL(blob);
+                                        link.download = filename;
+                                        document.body.appendChild(link);
+                                        link.click();
+                                        document.body.removeChild(link);
+                                        URL.revokeObjectURL(link.href);
+                                    }
+                                    catch (e) {
+                                        // eslint-disable-next-line no-console
+                                        console.error(t.downloadError, e);
+                                    }
+                                }, children: _jsx(Download, {}) }), _jsx(IconButton, { "aria-label": t.copy, title: t.copy, onClick: onClickCopy, style: { position: 'relative' }, children: _jsx(Copy, {}) }), onInsertCode
+                                ? (_jsx(IconButton, { "aria-label": t.insert, title: t.insert, onClick: onClickInsert, style: { position: 'relative' }, children: _jsx(ChevronDoubleDown, { style: { transform: 'rotate(90deg)' } }) }))
+                                : null, onNewFile
+                                ? (_jsx(IconButton, { "aria-label": t.newFile, title: t.newFile, onClick: onClickNewFile, style: { position: 'relative' }, children: _jsx(AddCode, {}) }))
+                                : null] })] })), _jsx("div", { children: _jsx(SyntaxHighlighter, { ...props, className: "highlighter", style: themeKind === 'dark' ? materialDark : vs, language: computedLanguage, PreTag: "div", showLineNumbers: showLines, lineNumberContainerStyle: lineNumbersStyle, lineNumberStyle: lineNumbersStyle, children: content }) })] }));
 };
 const dictionary = {
     en: {
@@ -106,6 +131,8 @@ const dictionary = {
         newFile: 'Creates a new file with this code as its content',
         hideLines: 'Hide line numbers',
         showLines: 'Show line numbers',
+        downloadCode: 'Download the code',
+        downloadError: 'Error downloading code',
     },
     pt: {
         copy: 'Copiar código para a área de transferência',
@@ -113,6 +140,8 @@ const dictionary = {
         newFile: 'Criar um novo arquivo com este código como conteúdo',
         hideLines: 'Esconder números das linhas',
         showLines: 'Mostrar números das linhas',
+        downloadCode: 'Fazer download do código',
+        downloadError: 'Erro ao fazer download do código',
     },
 };
 //# sourceMappingURL=Code.js.map

package/dist/components/Code.js.map

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

package/dist/layout.css

@@ -104,10 +104,10 @@
     align-items: center;
     gap: 8px;
     border-radius: 4px;
-    padding: 10px;
+    padding: 10px 8px;
     img {
-      width: 36px;
-      height: 36px;
+      width: 32px;
+      height: 32px;
       border-radius: 4px;
     }
     h6 {

package/dist/views/Home/index.d.ts

@@ -4,5 +4,5 @@ import { HomeProps } from './types.js';
  *
  * The home page can be replaced by providing children to the component `StackspotAIWidget`.
  */
-export declare const Home: ({ initialAgents, ...props }: HomeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Home: ({ initialAgents, urlCreateAgent, ...props }: HomeProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/Home/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Home/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAqBnC;;;;GAIG;AACH,eAAO,MAAM,IAAI,gCAAiC,SAAS,4CAgB1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Home/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAqBnC;;;;GAIG;AACH,eAAO,MAAM,IAAI,gDAAiD,SAAS,4CAiB1E,CAAA"}

package/dist/views/Home/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow';
 import { styled } from 'styled-components';
 import { AgentCard } from '../../components/AgentCard/index.js';
+import { AgentCardCreate } from '../../components/AgentCard/AgentCardCreate.js';
 import { FallbackBoundary } from '../../components/FallbackBoundary/index.js';
 import { useCurrentChatState } from '../../context/hooks.js';
 import { BuiltInAgent } from './BuiltInAgent.js';
@@ -29,9 +30,9 @@ const AgentList = styled.ul `
  *
  * The home page can be replaced by providing children to the component `StackspotAIWidget`.
  */
-export const Home = ({ initialAgents, ...props }) => {
+export const Home = ({ initialAgents, urlCreateAgent, ...props }) => {
     const agent = useCurrentChatState('agent');
     const isAgentEnabled = useCurrentChatState('features').agent;
-    return (_jsxs(FallbackBoundary, { children: [agent && !agent.builtIn ? _jsx(CustomAgent, {}) : _jsx(BuiltInAgent, { ...props }), !!initialAgents && isAgentEnabled && (_jsx(FadingOverflow, { enableHorizontalScrollWithVerticalWheel: true, sides: ['left', 'right'], scroll: "arrows", children: _jsx(AgentList, { className: "agent-list", children: initialAgents.map((agent) => _jsx("li", { children: _jsx(AgentCard, { agent: agent }) }, agent.id)) }) }))] }));
+    return (_jsxs(FallbackBoundary, { children: [agent && !agent.builtIn ? _jsx(CustomAgent, {}) : _jsx(BuiltInAgent, { ...props }), !!initialAgents && isAgentEnabled && (_jsx(FadingOverflow, { enableHorizontalScrollWithVerticalWheel: true, sides: ['left', 'right'], scroll: "arrows", children: _jsxs(AgentList, { className: "agent-list", children: [urlCreateAgent && _jsx("li", { children: _jsx(AgentCardCreate, { urlCreateAgent: urlCreateAgent }) }), initialAgents.map((agent) => _jsx("li", { children: _jsx(AgentCard, { agent: agent }) }, agent.id))] }) }))] }));
 };
 //# sourceMappingURL=index.js.map

package/dist/views/Home/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/Home/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAA;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;CAiB1B,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IAC7D,MAAM,KAAK,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,cAAc,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC,KAAK,CAAA;IAE5D,OAAO,CACL,MAAC,gBAAgB,eACd,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,KAAK,GAAI,EACvE,CAAC,CAAC,aAAa,IAAI,cAAc,IAAI,CACpC,KAAC,cAAc,IAAC,uCAAuC,QAAC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAC,QAAQ,YAC/F,KAAC,SAAS,IAAC,SAAS,EAAC,YAAY,YAC9B,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAmB,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,IAArC,KAAK,CAAC,EAAE,CAAkC,CAAC,GACxE,GACG,CAClB,IACgB,CACpB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/Home/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAA;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAA;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;CAiB1B,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IAC7E,MAAM,KAAK,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,cAAc,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC,KAAK,CAAA;IAE5D,OAAO,CACL,MAAC,gBAAgB,eACd,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,KAAK,GAAI,EACvE,CAAC,CAAC,aAAa,IAAI,cAAc,IAAI,CACpC,KAAC,cAAc,IAAC,uCAAuC,QAAC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAC,QAAQ,YAC/F,MAAC,SAAS,IAAC,SAAS,EAAC,YAAY,aAC9B,cAAc,IAAI,uBAAI,KAAC,eAAe,IAAC,cAAc,EAAE,cAAc,GAAI,GAAK,EAC9E,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAmB,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,IAArC,KAAK,CAAC,EAAE,CAAkC,CAAC,IACxE,GACG,CAClB,IACgB,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/views/Home/types.d.ts

@@ -8,5 +8,9 @@ export interface HomeProps {
      * Initial agents to show in home.
      */
     initialAgents?: LabeledAgent[];
+    /**
+     * URL to redirect to the "Create Agent" page on the portal
+     */
+    urlCreateAgent?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/views/Home/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/views/Home/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/views/Home/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.22.0-beta.4",
+  "version": "1.22.0-beta.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/StackspotAIWidget.tsx

@@ -51,6 +51,10 @@ export interface AIWidgetProps extends WithStyle, CustomMessage {
    * A boolean indicating whether or not the chat should have a visible header.
    */
   hasHeader?: boolean,
+  /**
+   *  URL to redirect to the "Create Agent" page on the portal
+   */
+  urlCreateAgent?: string,
 }
 
 /**
@@ -69,6 +73,7 @@ export const StackspotAIWidget = (
     hasHeader = true,
     beforeMessage,
     afterMessage,
+    urlCreateAgent,
   }: AIWidgetProps,
 ) => {
   const rightPanelRef = useRef<HTMLDivElement>(null)
@@ -96,7 +101,7 @@ export const StackspotAIWidget = (
                 <div className="chat-content">
                   {prefix}
                   {isCurrentChatEmpty
-                    ? (children ?? <Home username={username} initialAgents={initialAgents}/>)
+                    ? (children ?? <Home username={username} initialAgents={initialAgents} urlCreateAgent={urlCreateAgent} />)
                     : <Chat username={username} beforeMessage={beforeMessage} afterMessage={afterMessage} />
                   }
                 </div>

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.22.0-beta.4",
-  "date": "Tue May 27 2025 19:19:09 GMT-0300 (Horário Padrão de Brasília)",
+  "version": "1.22.0-beta.6",
+  "date": "Wed May 28 2025 11:45:22 GMT-0300 (Horário Padrão de Brasília)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",

package/src/components/AgentCard/AgentCardCreate.tsx

@@ -0,0 +1,44 @@
+import { IconBox, Text } from '@citric/core'
+import { PlusMini } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { dictionary } from './dictionary'
+
+const StyledCard = styled.a`
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid ${theme.color.light[600]};
+  text-decoration:none;
+
+  &:hover {
+    background-color: ${theme.color.light[500]};
+  }
+
+  .text-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    color: ${theme.color.light['contrastText']}
+  }
+`
+
+export const AgentCardCreate = ({ urlCreateAgent }: { urlCreateAgent: string  }) => {
+  const t = useTranslate(dictionary)
+  return (
+    <StyledCard href={urlCreateAgent} role="link" tabIndex={0} className={'agent-card'}>
+      <IconBox color="light" appearance="square" size="md">
+        <PlusMini />
+      </IconBox>
+      <div className="text-box">
+        <Text appearance="body2">
+          {t.create}
+        </Text>
+      </div>
+    </StyledCard>
+  )
+}

package/src/components/AgentCard/dictionary.ts

@@ -7,6 +7,7 @@ export const dictionary = {
     account: 'Account',
     shared: 'Shared',
     agent: 'Agent',
+    create: 'Create',
   },
   pt: {
     builtin: 'Embutido',
@@ -14,6 +15,7 @@ export const dictionary = {
     account: 'Conta',
     shared: 'Compartilhado',
     agent: 'Agente',
+    create: 'Criar',
   },
 } satisfies Dictionary
 

package/src/components/Code.tsx

@@ -2,7 +2,8 @@
  * Copied from the extension's webview.
  */
 
-import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons'
+import { Text } from '@citric/core'
+import { AddCode, ChevronDoubleDown, Collapse, Copy, Download } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -12,6 +13,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'
 import { WithChildren } from '../types'
+import { languages } from '../utils/programming-languages'
 
 export type CodeAction = (
   code: string,
@@ -53,23 +55,28 @@ const CodeBox = styled.code`
     }
   }
 
-  .action-bar {
+  .header-code {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     background: ${theme.color.light[600]};
     padding: 4px 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 
-    button {
-      background: transparent;
-      border: none;
-      opacity: 0.75;
-      transition: opacity 0.2s;
+    .action-bar {
+      display: flex;
+      flex-direction: row;
+     
+      button {
+        background: transparent;
+        border: none;
+        opacity: 0.75;
+        transition: opacity 0.2s;
 
-      &:hover {
-        opacity: 1;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
   }
@@ -108,6 +115,7 @@ export const Code = ({
   const match = /language-(\w+)/.exec(className || '')
   const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt'
   const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim()
+  const languageExtension = languages.find(l => l.value === computedLanguage)?.extensions?.[0] ?? '.txt'
 
   function onClickInsert() {
     onInsertCode?.(content, computedLanguage)
@@ -137,47 +145,75 @@ export const Code = ({
   return (
     <CodeBox className={['code-box', themeKind, className].join(' ')}>
       {showActionBar && (
-        <div className="action-bar" role="toolbar">
-          <IconButton
-            aria-label={showLines ? t.hideLines : t.showLines}
-            title={showLines ? t.hideLines : t.showLines}
-            onClick={() => setShowLines(v => !v)}
-            style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
-          >
-            <Collapse />
-          </IconButton>
-          <IconButton
-            aria-label={t.copy}
-            title={t.copy}
-            onClick={onClickCopy}
-            style={{ position: 'relative' }}
-          >
-            <Copy />
-          </IconButton>
-          {onInsertCode
-            ? (
-              <IconButton
-                aria-label={t.insert}
-                title={t.insert}
-                onClick={onClickInsert}
-                style={{ position: 'relative' }}
-              >
-                <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
-              </IconButton>
-            )
-            : null}
-          {onNewFile
-            ? (
-              <IconButton
-                aria-label={t.newFile}
-                title={t.newFile}
-                onClick={onClickNewFile}
-                style={{ position: 'relative' }}
-              >
-                <AddCode />
-              </IconButton>
-            )
-            : null}
+        <div className="header-code">
+          <div>
+            <Text appearance="code2">{computedLanguage ?? ''}</Text>
+          </div>
+          <div className="action-bar" role="toolbar">
+            <IconButton
+              aria-label={showLines ? t.hideLines : t.showLines}
+              title={showLines ? t.hideLines : t.showLines}
+              onClick={() => setShowLines(v => !v)}
+              style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
+            >
+              <Collapse />
+            </IconButton>
+            <IconButton
+              aria-label={t.downloadCode}
+              title={t.downloadCode}
+              onClick={() => {
+                try {
+                  const extension = languageExtension
+                  const filename = `download${extension}`
+                  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+                  const link = document.createElement('a')
+                  link.href = URL.createObjectURL(blob)
+                  link.download = filename
+                  document.body.appendChild(link)
+                  link.click()
+                  document.body.removeChild(link)
+                  URL.revokeObjectURL(link.href)
+                } catch (e) {
+                  // eslint-disable-next-line no-console
+                  console.error(t.downloadError, e)
+                }
+              }}
+            >
+              <Download />
+            </IconButton>
+            <IconButton
+              aria-label={t.copy}
+              title={t.copy}
+              onClick={onClickCopy}
+              style={{ position: 'relative' }}
+            >
+              <Copy />
+            </IconButton>
+            {onInsertCode
+              ? (
+                <IconButton
+                  aria-label={t.insert}
+                  title={t.insert}
+                  onClick={onClickInsert}
+                  style={{ position: 'relative' }}
+                >
+                  <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
+                </IconButton>
+              )
+              : null}
+            {onNewFile
+              ? (
+                <IconButton
+                  aria-label={t.newFile}
+                  title={t.newFile}
+                  onClick={onClickNewFile}
+                  style={{ position: 'relative' }}
+                >
+                  <AddCode />
+                </IconButton>
+              )
+              : null}
+          </div>
         </div>
       )}
       <div>
@@ -205,6 +241,8 @@ const dictionary = {
     newFile: 'Creates a new file with this code as its content',
     hideLines: 'Hide line numbers',
     showLines: 'Show line numbers',
+    downloadCode: 'Download the code',
+    downloadError: 'Error downloading code',
   },
   pt: {
     copy: 'Copiar código para a área de transferência',
@@ -212,5 +250,7 @@ const dictionary = {
     newFile: 'Criar um novo arquivo com este código como conteúdo',
     hideLines: 'Esconder números das linhas',
     showLines: 'Mostrar números das linhas',
+    downloadCode: 'Fazer download do código',
+    downloadError: 'Erro ao fazer download do código',
   },
 } satisfies Dictionary

package/src/layout.css

@@ -104,10 +104,10 @@
     align-items: center;
     gap: 8px;
     border-radius: 4px;
-    padding: 10px;
+    padding: 10px 8px;
     img {
-      width: 36px;
-      height: 36px;
+      width: 32px;
+      height: 32px;
       border-radius: 4px;
     }
     h6 {

package/src/views/Home/index.tsx

@@ -1,6 +1,7 @@
 import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow'
 import { styled } from 'styled-components'
 import { AgentCard } from '../../components/AgentCard'
+import { AgentCardCreate } from '../../components/AgentCard/AgentCardCreate'
 import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useCurrentChatState } from '../../context/hooks'
 import { BuiltInAgent } from './BuiltInAgent'
@@ -31,7 +32,7 @@ const AgentList = styled.ul`
  * 
  * The home page can be replaced by providing children to the component `StackspotAIWidget`.
  */
-export const Home = ({ initialAgents, ...props }: HomeProps) => {
+export const Home = ({ initialAgents, urlCreateAgent, ...props }: HomeProps) => {
   const agent = useCurrentChatState('agent')
   const isAgentEnabled = useCurrentChatState('features').agent
     
@@ -41,6 +42,7 @@ export const Home = ({ initialAgents, ...props }: HomeProps) => {
       {!!initialAgents && isAgentEnabled && (
         <FadingOverflow enableHorizontalScrollWithVerticalWheel sides={['left', 'right']} scroll="arrows">
           <AgentList className="agent-list">
+            {urlCreateAgent && <li><AgentCardCreate urlCreateAgent={urlCreateAgent} /></li>}
             {initialAgents.map((agent) => <li key={agent.id}><AgentCard agent={agent} /></li>)}
           </AgentList>
         </FadingOverflow>

package/src/views/Home/types.ts

@@ -9,4 +9,8 @@ export interface HomeProps {
    * Initial agents to show in home.
    */
   initialAgents?: LabeledAgent[],
+  /**
+   * URL to redirect to the "Create Agent" page on the portal
+   */
+  urlCreateAgent?: string,
 }