@optilogic/chat 1.3.4 → 1.3.6

package/dist/index.cjs

@@ -28,7 +28,18 @@ var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 
 // src/components/agent-response/AgentResponse.tsx
 var ActivityIndicators = React11__namespace.forwardRef(
-  ({ toolCalls, knowledge, memory, statusUpdates = [], className, ...props }, ref) => {
+  ({
+    toolCalls,
+    knowledge,
+    memory,
+    statusUpdates = [],
+    statusUpdateAnchor,
+    toolCallsAnchor,
+    knowledgeAnchor,
+    memoryAnchor,
+    className,
+    ...props
+  }, ref) => {
     const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
     if (!hasAnyActivity) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: core.cn("flex items-center gap-2", className), ...props, children: [
@@ -36,6 +47,7 @@ var ActivityIndicators = React11__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            "data-tour": statusUpdateAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -56,6 +68,7 @@ var ActivityIndicators = React11__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            "data-tour": toolCallsAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -76,6 +89,7 @@ var ActivityIndicators = React11__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            "data-tour": knowledgeAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -96,6 +110,7 @@ var ActivityIndicators = React11__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            "data-tour": memoryAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -158,6 +173,11 @@ var MetadataRow = React11__namespace.forwardRef(
     statusContent,
     status,
     elapsedTime,
+    thinkingToggleAnchor,
+    statusUpdateAnchor,
+    toolCallsAnchor,
+    knowledgeAnchor,
+    memoryAnchor,
     className,
     ...props
   }, ref) => {
@@ -193,8 +213,9 @@ var MetadataRow = React11__namespace.forwardRef(
           hasThinking ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
+              "data-tour": thinkingToggleAnchor,
               onClick: onToggle,
-              className: "flex items-center gap-1.5 hover:bg-muted/50 -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors shrink-0",
+              className: "flex items-center gap-1.5 hover:bg-hover -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors shrink-0",
               children: leftContent
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 shrink-0", children: leftContent }),
@@ -205,7 +226,11 @@ var MetadataRow = React11__namespace.forwardRef(
               toolCalls,
               knowledge,
               memory,
-              statusUpdates
+              statusUpdates,
+              statusUpdateAnchor,
+              toolCallsAnchor,
+              knowledgeAnchor,
+              memoryAnchor
             }
           )
         ]
@@ -225,7 +250,7 @@ var ThinkingStepItem = ({ step, renderMarkdown }) => {
       "button",
       {
         onClick: toggleCollapse,
-        className: "w-full flex items-center gap-1.5 py-1.5 px-2 hover:bg-muted/50 transition-colors text-left",
+        className: "w-full flex items-center gap-1.5 py-1.5 px-2 hover:bg-hover transition-colors text-left",
         style: { paddingLeft: `${indentPadding + 8}px` },
         children: [
           isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
@@ -276,6 +301,9 @@ var ActionBar = React11__namespace.forwardRef(
     feedback,
     onFeedbackChange,
     onResponseCopy,
+    copyAnchor,
+    thumbsUpAnchor,
+    thumbsDownAnchor,
     className,
     ...props
   }, ref) => {
@@ -316,8 +344,9 @@ var ActionBar = React11__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
+                "data-tour": copyAnchor,
                 onClick: handleCopy,
-                className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+                className: "p-1.5 rounded hover:bg-hover transition-colors text-muted-foreground hover:text-foreground",
                 title: copied ? "Copied!" : "Copy response",
                 children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" })
               }
@@ -325,9 +354,10 @@ var ActionBar = React11__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
+                "data-tour": thumbsUpAnchor,
                 onClick: handleThumbsUp,
                 className: core.cn(
-                  "p-1.5 rounded hover:bg-muted transition-colors",
+                  "p-1.5 rounded hover:bg-hover transition-colors",
                   isThumbsUp ? "text-green-500" : "text-muted-foreground hover:text-foreground"
                 ),
                 title: "Good response",
@@ -337,9 +367,10 @@ var ActionBar = React11__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
+                "data-tour": thumbsDownAnchor,
                 onClick: handleThumbsDown,
                 className: core.cn(
-                  "p-1.5 rounded hover:bg-muted transition-colors",
+                  "p-1.5 rounded hover:bg-hover transition-colors",
                   isThumbsDown ? "text-red-500" : "text-muted-foreground hover:text-foreground"
                 ),
                 title: "Poor response",
@@ -627,7 +658,7 @@ var HITLSection = React11__namespace.forwardRef(
             "button",
             {
               onClick: toggleExpanded,
-              className: "w-full flex items-center gap-2 py-2 px-3 hover:bg-muted/50 transition-colors text-left",
+              className: "w-full flex items-center gap-2 py-2 px-3 hover:bg-hover transition-colors text-left",
               children: [
                 isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleQuestion, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
@@ -1144,7 +1175,7 @@ function TimelineAgentBlock({
       "button",
       {
         onClick: onToggleCollapsed,
-        className: "w-full flex items-center gap-1.5 py-1 hover:bg-muted/50 -ml-1 pl-1 pr-2 rounded transition-colors text-left",
+        className: "w-full flex items-center gap-1.5 py-1 hover:bg-hover -ml-1 pl-1 pr-2 rounded transition-colors text-left",
         children: [
           isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground/80", children: block.agentName }),
@@ -1260,7 +1291,7 @@ function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }
               "button",
               {
                 onClick: () => toggleFilter(tc.type),
-                className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] transition-colors ${isActive ? "bg-accent text-accent-foreground ring-1 ring-accent-foreground/20" : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/50"}`,
+                className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] transition-colors ${isActive ? "bg-accent text-accent-foreground ring-1 ring-accent-foreground/20" : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-hover"}`,
                 title: `${isActive ? "Hide" : "Show only"} ${tc.label}`,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(tc.icon, { className: "w-3 h-3" }),
@@ -1284,7 +1315,7 @@ function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }
               "button",
               {
                 onClick: collapseAll,
-                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-muted/50 transition-colors",
+                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-hover transition-colors",
                 title: "Collapse all",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUp, { className: "w-3 h-3" })
               }
@@ -1293,7 +1324,7 @@ function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }
               "button",
               {
                 onClick: expandAll,
-                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-muted/50 transition-colors",
+                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-hover transition-colors",
                 title: "Expand all",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3" })
               }
@@ -1350,6 +1381,7 @@ var AgentResponse = React11__namespace.forwardRef(
     renderThinkingMarkdown,
     timelineMaxHeight,
     classNames,
+    anchors,
     className,
     ...props
   }, ref) => {
@@ -1408,10 +1440,15 @@ var AgentResponse = React11__namespace.forwardRef(
                   statusUpdates: state.statusUpdates,
                   statusContent,
                   status: state.status,
-                  elapsedTime
+                  elapsedTime,
+                  thinkingToggleAnchor: anchors?.thinkingToggle,
+                  statusUpdateAnchor: anchors?.statusUpdate,
+                  toolCallsAnchor: anchors?.toolCalls,
+                  knowledgeAnchor: anchors?.knowledge,
+                  memoryAnchor: anchors?.memory
                 }
               ),
-              hasTimelineEntries ? thinkingExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+              hasTimelineEntries ? thinkingExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3 border-t border-border", "data-tour": anchors?.thinkingSection, children: /* @__PURE__ */ jsxRuntime.jsx(
                 AgentTimeline,
                 {
                   entries: state.timelineEntries,
@@ -1422,6 +1459,7 @@ var AgentResponse = React11__namespace.forwardRef(
               ) }) : /* @__PURE__ */ jsxRuntime.jsx(
                 ThinkingSection,
                 {
+                  "data-tour": anchors?.thinkingSection,
                   content: state.thinkingSteps && state.thinkingSteps.length > 0 ? state.thinkingSteps : state.thinking,
                   isExpanded: thinkingExpanded,
                   renderMarkdown: renderThinkingMarkdown
@@ -1455,7 +1493,10 @@ var AgentResponse = React11__namespace.forwardRef(
               totalTimeSeconds,
               feedback,
               onFeedbackChange,
-              onResponseCopy
+              onResponseCopy,
+              copyAnchor: anchors?.copyAction,
+              thumbsUpAnchor: anchors?.thumbsUp,
+              thumbsDownAnchor: anchors?.thumbsDown
             }
           )
         ]
@@ -1585,6 +1626,7 @@ var UserPromptInput = React11__namespace.forwardRef(
     enableTags = false,
     onTagCreate,
     onTagDelete,
+    anchors,
     className,
     ...props
   }, ref) => {
@@ -1704,6 +1746,7 @@ var UserPromptInput = React11__namespace.forwardRef(
             isSubmitting && onStop ? /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: stopTooltip, disabled: !stopTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
               core.IconButton,
               {
+                "data-tour": anchors?.stopButton,
                 icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {}),
                 variant: "filled",
                 size: "sm",
@@ -1714,6 +1757,7 @@ var UserPromptInput = React11__namespace.forwardRef(
             ) }) : /* @__PURE__ */ jsxRuntime.jsx(
               core.IconButton,
               {
+                "data-tour": anchors?.sendButton,
                 icon: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, {}),
                 variant: "filled",
                 size: "sm",