@altimateai/ui-components 0.0.47 → 0.0.49

package/dist/TagsInput.js

@@ -3519,7 +3519,7 @@ const gf = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l1
                 "aria-label": _.label,
                 className: "al-cursor-pointer",
                 title: _.label,
-                children: /* @__PURE__ */ c.jsxs("div", { className: "al-flex al-items-center al-gap-2", children: [
+                children: /* @__PURE__ */ c.jsxs("div", { className: "al-flex al-items-center al-gap-2 al-w-full", children: [
                   /* @__PURE__ */ c.jsx(
                     uf,
                     {
@@ -3529,7 +3529,7 @@ const gf = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l1
                       )
                     }
                   ),
-                  /* @__PURE__ */ c.jsx("span", { className: "al-truncate", children: _.label })
+                  /* @__PURE__ */ c.jsx("div", { className: "al-flex-1 al-min-w-0", children: _.node ? _.node : /* @__PURE__ */ c.jsx("span", { className: "al-truncate", children: _.label }) })
                 ] })
               },
               _.value

package/dist/chatbotV2/index.d.ts

@@ -1,6 +1,6 @@
 import React__default, { FC } from 'react';
-import { j as ChatbotProps, k as ChatbotProviderProps, m as ChatState, A as Artifact, n as ContextOption, I as InteractionRequest, o as ChatMessage, p as AgentAction, q as ChatResponse, F as Feedback, r as LoadingState, s as ChatSession, i as Citation, t as TodoItem, M as MessageAttachment, u as AgentStreamResponse } from '../types-CqeMsC8t.js';
-export { v as AssistantMeta, x as ChatbotUrls, D as Datamate, w as FileUploadProps, J as FinalResponseData, B as InteractionChoice, z as InteractionType, y as Mode, H as ProgressUpdate, G as ToolUsageData, U as UploadedFile, K as agentStreamResponseSchema, E as todoItemSchema } from '../types-CqeMsC8t.js';
+import { j as ChatbotProps, k as ChatbotProviderProps, m as ChatState, A as Artifact, n as ContextOption, I as InteractionRequest, o as ChatMessage, p as AgentAction, q as ChatResponse, F as Feedback, r as LoadingState, s as ChatSession, i as Citation, t as TodoItem, M as MessageAttachment, u as AgentStreamResponse } from '../types-oWZJEjV7.js';
+export { v as AssistantMeta, x as ChatbotUrls, D as Datamate, w as FileUploadProps, J as FinalResponseData, B as InteractionChoice, z as InteractionType, y as Mode, H as ProgressUpdate, G as ToolUsageData, U as UploadedFile, K as agentStreamResponseSchema, E as todoItemSchema } from '../types-oWZJEjV7.js';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { UnknownAction } from '@reduxjs/toolkit';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -131,9 +131,9 @@ interface UpdateModePayload {
     sessionId: string;
     mode: string;
 }
-interface UpdateDatamatesPayload {
+interface UpdateDatamateInSessionPayload {
     sessionId: string;
-    datamates?: string[];
+    datamates: string[];
 }
 declare const initialState: ChatState;
 declare const createSession: _reduxjs_toolkit.ActionCreatorWithPayload<{
@@ -176,7 +176,7 @@ declare const clearContext: _reduxjs_toolkit.ActionCreatorWithPayload<{
     sessionId: string;
 }, "chat/clearContext">;
 declare const updateMode: _reduxjs_toolkit.ActionCreatorWithPayload<UpdateModePayload, "chat/updateMode">;
-declare const updateDatamates: _reduxjs_toolkit.ActionCreatorWithPayload<UpdateDatamatesPayload, "chat/updateDatamates">;
+declare const updateDatamateInSession: _reduxjs_toolkit.ActionCreatorWithPayload<UpdateDatamateInSessionPayload, "chat/updateDatamateInSession">;
 declare const setSessions: _reduxjs_toolkit.ActionCreatorWithPayload<Record<string, ChatSession>, "chat/setSessions">;
 declare const resetSession: _reduxjs_toolkit.ActionCreatorWithoutPayload<"chat/resetSession">;
 
@@ -277,4 +277,4 @@ declare const Citations: ({ citations, frontEndUrl, }: {
     frontEndUrl: string;
 }) => JSX.Element | null;
 
-export { AgentAction, AgentStreamResponse, Artifact, Artifacts, CancelGenerationButton, ChatMessage, ChatProvider, ChatResponse, ChatSession, ChatState, ChatTriggerLink, ChatbotProps, ChatbotProviderProps, Chatbot as ChatbotV2, Citations, CoachAI, ContextOption, ContextPanel, Feedback, FeedbackButtons, InteractionPrompt, InteractionRequest, LoadingIndicator, LoadingState, MessageAttachment, MessageItem, MessageList, MessageMenu, QuestionForm, RegenerateButton, StatusUpdates, TodoItem, addAction, addMessage, clearActions, clearContext, clearHistory, clearTodos, createSession, deleteMessage, initialState, processAgentMessageContent, processAgentStream, processExistingConversation, processPlaygroundSessionTurns, resetSession, sendMessageAndProcessStream, setAbortController, setCurrentSession, setError, setLoadingState, setSelectedModel, setSessions, setTodos, streamResponseToAgentMessages, updateContext, updateDatamates, updateMessageFeedback, updateMode, useAgentChat, useChatContext };
+export { AgentAction, AgentStreamResponse, Artifact, Artifacts, CancelGenerationButton, ChatMessage, ChatProvider, ChatResponse, ChatSession, ChatState, ChatTriggerLink, ChatbotProps, ChatbotProviderProps, Chatbot as ChatbotV2, Citations, CoachAI, ContextOption, ContextPanel, Feedback, FeedbackButtons, InteractionPrompt, InteractionRequest, LoadingIndicator, LoadingState, MessageAttachment, MessageItem, MessageList, MessageMenu, QuestionForm, RegenerateButton, StatusUpdates, TodoItem, addAction, addMessage, clearActions, clearContext, clearHistory, clearTodos, createSession, deleteMessage, initialState, processAgentMessageContent, processAgentStream, processExistingConversation, processPlaygroundSessionTurns, resetSession, sendMessageAndProcessStream, setAbortController, setCurrentSession, setError, setLoadingState, setSelectedModel, setSessions, setTodos, streamResponseToAgentMessages, updateContext, updateDatamateInSession, updateMessageFeedback, updateMode, useAgentChat, useChatContext };

package/dist/chatbotV2/index.js

@@ -1,6 +1,6 @@
-import { A as e, b as t, a as o, g as n, C as r, m as i, c as d, d as c, F as g, I as C, L as u, n as S, M as l, e as p, f as m, Q as M, R as A, S as h, H as x, x as I, o as L, J as P, P as T, z as b, N as k, r as B, B as F, q as R, k as f, p as v, j as y, l as E, W as D, s as G, G as H, w as Q, E as U, D as V, v as j, V as q, K as w, i as z, t as J, O as K, U as N, y as O, T as W, h as X, u as Y } from "../CoachForm.js";
+import { A as a, b as t, a as o, g as n, C as r, m as i, c as d, d as c, F as g, I as C, L as S, n as u, M as l, e as p, f as m, Q as M, R as A, S as h, H as x, x as I, o as L, J as P, P as T, z as b, N as k, r as B, B as F, q as R, k as f, p as v, j as y, l as E, W as D, s as G, G as H, w as Q, E as U, D as V, v as j, V as q, K as w, i as z, t as J, O as K, U as N, y as O, T as W, h as X, u as Y } from "../CoachForm.js";
 export {
-  e as Artifacts,
+  a as Artifacts,
   t as CancelGenerationButton,
   o as ChatProvider,
   n as ChatTriggerLink,
@@ -10,8 +10,8 @@ export {
   c as ContextPanel,
   g as FeedbackButtons,
   C as InteractionPrompt,
-  u as LoadingIndicator,
-  S as LoadingState,
+  S as LoadingIndicator,
+  u as LoadingState,
   l as MessageItem,
   p as MessageList,
   m as MessageMenu,
@@ -44,7 +44,7 @@ export {
   z as streamResponseToAgentMessages,
   J as todoItemSchema,
   K as updateContext,
-  N as updateDatamates,
+  N as updateDatamateInSession,
   O as updateMessageFeedback,
   W as updateMode,
   X as useAgentChat,

package/dist/index.d.ts

@@ -3,8 +3,8 @@ import { HTMLAttributes, ButtonHTMLAttributes, ReactNode, FC, MouseEvent } from
 import { B as ButtonProps } from './Button-CVsSwe4f.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PlotParams } from 'react-plotly.js';
-import { T as TaskLabels, a as TeamMateContextProps, b as TeamMateState, c as TeamMateConfig, d as TeamMateActionType, e as TeamMateAvailability } from './types-CqeMsC8t.js';
-export { i as Citation, f as CoachAiConfirmationResponse, C as CoachAiResponse, g as ContentCategory, L as Learning, P as PersonalizationScope, h as TeamMateComponentProps, l as learningSchema } from './types-CqeMsC8t.js';
+import { T as TaskLabels, a as TeamMateContextProps, b as TeamMateState, c as TeamMateConfig, d as TeamMateActionType, e as TeamMateAvailability } from './types-oWZJEjV7.js';
+export { i as Citation, f as CoachAiConfirmationResponse, C as CoachAiResponse, g as ContentCategory, L as Learning, P as PersonalizationScope, h as TeamMateComponentProps, l as learningSchema } from './types-oWZJEjV7.js';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as immer from 'immer';

package/dist/shadcn/index.d.ts

@@ -418,6 +418,7 @@ interface Props<TMultiSelect extends boolean = false> {
     options: {
         value: string;
         label: string;
+        node?: ReactNode;
     }[];
     value?: TMultiSelect extends true ? string[] : string;
     onChange: (value: TMultiSelect extends true ? string[] : string) => void;

package/dist/storybook/Combobox.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { Combobox } from "../shadcn";
-import { Button } from "../button";
+import { Combobox, Button } from "../shadcn";
 import { DatabaseIcon } from "@ac-assets/icons";
 import { useState } from "react";
 
@@ -584,6 +583,259 @@ export const ComboboxCallbacksExample: StoryFn = () => {
   );
 };
 
+export const ComboboxCustomNodesExample: StoryFn = () => {
+  const [singleValue, setSingleValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>([]);
+
+  // Options with custom node rendering
+  const optionsWithNodes = [
+    {
+      value: "react",
+      label: "React",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-blue-500 al-rounded"></div>
+            <span>React</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Meta</span>
+        </div>
+      ),
+    },
+    {
+      value: "vue",
+      label: "Vue",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-green-500 al-rounded"></div>
+            <span>Vue.js</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Evan You</span>
+        </div>
+      ),
+    },
+    {
+      value: "angular",
+      label: "Angular",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-red-500 al-rounded"></div>
+            <span>Angular</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Google</span>
+        </div>
+      ),
+    },
+    {
+      value: "svelte",
+      label: "Svelte",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-orange-500 al-rounded"></div>
+            <span>Svelte</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Rich Harris</span>
+        </div>
+      ),
+    },
+  ];
+
+  // Options with interactive elements
+  const optionsWithButtons = [
+    {
+      value: "typescript",
+      label: "TypeScript",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-blue-600 al-rounded"></div>
+            <div>
+              <div className="al-font-medium">TypeScript</div>
+              <div className="al-text-xs al-text-muted-foreground">Strongly typed JavaScript</div>
+            </div>
+          </div>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              alert("TypeScript info clicked!");
+            }}
+            className="al-text-xs al-px-2 al-py-1 al-bg-blue-100 al-text-blue-700 al-rounded hover:al-bg-blue-200"
+          >
+            Info
+          </button>
+        </div>
+      ),
+    },
+    {
+      value: "javascript",
+      label: "JavaScript",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-yellow-500 al-rounded"></div>
+            <div>
+              <div className="al-font-medium">JavaScript</div>
+              <div className="al-text-xs al-text-muted-foreground">Dynamic scripting language</div>
+            </div>
+          </div>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              alert("JavaScript info clicked!");
+            }}
+            className="al-text-xs al-px-2 al-py-1 al-bg-yellow-100 al-text-yellow-700 al-rounded hover:al-bg-yellow-200"
+          >
+            Info
+          </button>
+        </div>
+      ),
+    },
+    {
+      value: "python",
+      label: "Python",
+      node: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-green-600 al-rounded"></div>
+            <div>
+              <div className="al-font-medium">Python</div>
+              <div className="al-text-xs al-text-muted-foreground">
+                High-level programming language
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              alert("Python info clicked!");
+            }}
+            className="al-text-xs al-px-2 al-py-1 al-bg-green-100 al-text-green-700 al-rounded hover:al-bg-green-200"
+          >
+            Info
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  // Mixed options - some with nodes, some without
+  const mixedOptions = [
+    { value: "standard1", label: "Standard Option 1" },
+    {
+      value: "custom1",
+      label: "Custom Option 1",
+      node: (
+        <div className="al-flex al-items-center al-gap-2">
+          <div className="al-w-2 al-h-2 al-bg-purple-500 al-rounded-full"></div>
+          <span className="al-italic">Custom with node</span>
+        </div>
+      ),
+    },
+    { value: "standard2", label: "Standard Option 2" },
+    {
+      value: "custom2",
+      label: "Custom Option 2",
+      node: (
+        <div className="al-flex al-items-center al-gap-2">
+          <div className="al-w-2 al-h-2 al-bg-pink-500 al-rounded-full"></div>
+          <span className="al-font-bold">Another custom node</span>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <h3 className="al-text-lg al-font-medium">Custom Node Rendering</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Use the optional <code>node</code> property to provide custom ReactNode rendering for
+          dropdown options while keeping <code>label</code> as a string for text operations.
+        </p>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-6">
+        <div className="al-flex al-flex-col al-gap-4">
+          <h4 className="al-text-md al-font-medium">Framework Selector with Icons & Authors</h4>
+          <p className="al-text-sm al-text-muted-foreground">
+            Custom nodes with colored indicators and author information
+          </p>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Single Select</label>
+            <Combobox
+              options={optionsWithNodes}
+              value={singleValue}
+              onChange={value => setSingleValue(value as string)}
+              placeholder="Select a framework..."
+              buttonProps={{ className: "al-w-[300px]" }}
+            />
+            <div className="al-text-sm">Selected: {singleValue || "None"}</div>
+          </div>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Multi Select</label>
+            <Combobox
+              options={optionsWithNodes}
+              value={multiValue}
+              onChange={value => setMultiValue(value as string[])}
+              placeholder="Select frameworks..."
+              multiSelect={true}
+              buttonProps={{ className: "al-w-[300px]" }}
+            />
+            <div className="al-text-sm">
+              Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
+            </div>
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-4">
+          <h4 className="al-text-md al-font-medium">Interactive Elements in Options</h4>
+          <p className="al-text-sm al-text-muted-foreground">
+            Options with interactive buttons that can be clicked without selecting the option
+          </p>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">
+              Programming Languages with Info Buttons
+            </label>
+            <Combobox
+              options={optionsWithButtons}
+              value={singleValue}
+              onChange={value => setSingleValue(value as string)}
+              placeholder="Select a language..."
+              buttonProps={{ className: "al-w-[350px]" }}
+              popoverContentProps={{ className: "al-w-[350px]" }}
+            />
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-4">
+          <h4 className="al-text-md al-font-medium">Mixed Standard and Custom Options</h4>
+          <p className="al-text-sm al-text-muted-foreground">
+            Demonstrating that you can mix standard string labels with custom node rendering
+          </p>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Mixed Options</label>
+            <Combobox
+              options={mixedOptions}
+              value={singleValue}
+              onChange={value => setSingleValue(value as string)}
+              placeholder="Select an option..."
+              buttonProps={{ className: "al-w-[250px]" }}
+            />
+            <div className="al-text-sm">Selected: {singleValue || "None"}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const ComboboxPopoverCustomizationExample: StoryFn = () => {
   const options = [
     { value: "react", label: "React" },

package/dist/{types-CqeMsC8t.d.ts → types-oWZJEjV7.d.ts}

@@ -57,7 +57,6 @@ interface ChatbotUrls {
 interface Datamate {
     id: string;
     label: string;
-    endAdornment?: ReactNode;
 }
 interface Mode {
     value: string;
@@ -73,14 +72,13 @@ interface ChatbotProps {
     contextOptions?: ContextOption[];
     placeholder?: string;
     autoFocus?: boolean;
-    enableDatamatesSelection?: boolean;
-    datamates?: Datamate[];
     modes?: Mode[];
     classNames?: {
         chatbot?: string;
         chatMessages?: string;
     };
     initialMessage?: string;
+    questionFormLeftActions?: ReactNode[];
 }
 interface ChatbotProviderProps extends ChatbotProps {
     taskLabel?: keyof typeof TaskLabels;
@@ -193,8 +191,6 @@ interface ChatState {
         feedback?: ReactNode;
         questionFormButtons?: (userPrompt: string, onAccept: (improvedPrompt: string) => void) => ReactNode;
     };
-    enableDatamatesSelection?: boolean;
-    datamates?: Datamate[];
     modes?: Mode[];
     classNames?: {
         chatbot?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"