@optilogic/chat 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/chat",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Chat UI components for Optilogic - AgentResponse and related components for LLM interactions",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,8 +24,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@optilogic/editor": "1.3.4",
-    "@optilogic/core": "1.3.4"
+    "@optilogic/core": "1.3.6",
+    "@optilogic/editor": "1.3.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/agent-response/AgentResponse.tsx

@@ -22,6 +22,42 @@ export interface AgentResponseClassNames {
   response?: string;
 }
 
+/**
+ * Tour anchors (`data-tour` attribute values) to attach to specific elements
+ * inside an AgentResponse so a tour or test harness can target them.
+ *
+ * Each value, when provided, is rendered as `data-tour={value}` on the
+ * corresponding element. Omit a field to skip stamping the attribute on that
+ * element. Pair with the matching CSS selector form:
+ *
+ *   <AgentResponse anchors={{ copyAction: "chat-action-copy" }} />
+ *   // selector: '[data-tour="chat-action-copy"]'
+ *
+ * This is the standard convention in the @optilogic component library for
+ * threading tour IDs into elements that are rendered by internal
+ * sub-components and not otherwise reachable from the caller.
+ */
+export interface AgentResponseAnchors {
+  /** Status updates popover trigger in the metadata row (live status indicator). */
+  statusUpdate?: string;
+  /** Thinking expand/collapse toggle button in the metadata row. */
+  thinkingToggle?: string;
+  /** Thinking section content panel (when expanded). */
+  thinkingSection?: string;
+  /** Tool calls popover trigger in the metadata row. */
+  toolCalls?: string;
+  /** Knowledge popover trigger in the metadata row. */
+  knowledge?: string;
+  /** Memory popover trigger in the metadata row. */
+  memory?: string;
+  /** Copy button in the action bar. */
+  copyAction?: string;
+  /** Thumbs up button in the action bar. */
+  thumbsUp?: string;
+  /** Thumbs down button in the action bar. */
+  thumbsDown?: string;
+}
+
 export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The response state to render */
   state: AgentResponseState;
@@ -121,6 +157,22 @@ export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement>
    * />
    */
   classNames?: AgentResponseClassNames;
+
+  /**
+   * Tour anchors threaded into internal sub-components. See
+   * {@link AgentResponseAnchors} for the available element keys.
+   *
+   * @example
+   * <AgentResponse
+   *   state={state}
+   *   anchors={{
+   *     copyAction: "chat-action-copy",
+   *     thumbsUp: "chat-action-thumbs-up",
+   *     thumbsDown: "chat-action-thumbs-down",
+   *   }}
+   * />
+   */
+  anchors?: AgentResponseAnchors;
 }
 
 /**
@@ -175,6 +227,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
       renderThinkingMarkdown,
       timelineMaxHeight,
       classNames,
+      anchors,
       className,
       ...props
     },
@@ -280,12 +333,17 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
                 statusContent={statusContent}
                 status={state.status}
                 elapsedTime={elapsedTime}
+                thinkingToggleAnchor={anchors?.thinkingToggle}
+                statusUpdateAnchor={anchors?.statusUpdate}
+                toolCallsAnchor={anchors?.toolCalls}
+                knowledgeAnchor={anchors?.knowledge}
+                memoryAnchor={anchors?.memory}
               />
 
               {/* Thinking Content - AgentTimeline when timeline entries exist, ThinkingSection otherwise */}
               {hasTimelineEntries ? (
                 thinkingExpanded && (
-                  <div className="pb-3 border-t border-border">
+                  <div className="pb-3 border-t border-border" data-tour={anchors?.thinkingSection}>
                     <AgentTimeline
                       entries={state.timelineEntries!}
                       renderMarkdown={renderThinkingMarkdown}
@@ -296,6 +354,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
                 )
               ) : (
                 <ThinkingSection
+                  data-tour={anchors?.thinkingSection}
                   content={
                     state.thinkingSteps && state.thinkingSteps.length > 0
                       ? state.thinkingSteps
@@ -343,6 +402,9 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
             feedback={feedback}
             onFeedbackChange={onFeedbackChange}
             onResponseCopy={onResponseCopy}
+            copyAnchor={anchors?.copyAction}
+            thumbsUpAnchor={anchors?.thumbsUp}
+            thumbsDownAnchor={anchors?.thumbsDown}
           />
         )}
       </div>

package/src/components/agent-response/components/ActionBar.tsx

@@ -24,6 +24,15 @@ export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
   onFeedbackChange?: (feedback: FeedbackValue) => void;
   /** Callback when response is copied */
   onResponseCopy?: (response: string) => void;
+  /**
+   * Tour anchor (rendered as `data-tour`) on the copy button.
+   * Use with the `data-tour` convention to target this button from a tour step.
+   */
+  copyAnchor?: string;
+  /** Tour anchor (`data-tour`) on the thumbs up button. */
+  thumbsUpAnchor?: string;
+  /** Tour anchor (`data-tour`) on the thumbs down button. */
+  thumbsDownAnchor?: string;
 }
 
 /**
@@ -51,6 +60,9 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
       feedback,
       onFeedbackChange,
       onResponseCopy,
+      copyAnchor,
+      thumbsUpAnchor,
+      thumbsDownAnchor,
       className,
       ...props
     },
@@ -97,8 +109,9 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
         <div className="flex items-center gap-1">
           {/* Copy button */}
           <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"}
           >
             {copied ? (
@@ -110,9 +123,10 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
 
           {/* Thumbs up */}
           <button
+            data-tour={thumbsUpAnchor}
             onClick={handleThumbsUp}
             className={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"
@@ -124,9 +138,10 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
 
           {/* Thumbs down */}
           <button
+            data-tour={thumbsDownAnchor}
             onClick={handleThumbsDown}
             className={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"

package/src/components/agent-response/components/ActivityIndicators.tsx

@@ -18,6 +18,14 @@ export interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivEle
   memory: MemoryItem[];
   /** Status updates to display */
   statusUpdates?: StatusItem[];
+  /** Tour anchor (`data-tour`) on the status updates popover trigger. */
+  statusUpdateAnchor?: string;
+  /** Tour anchor (`data-tour`) on the tool calls popover trigger. */
+  toolCallsAnchor?: string;
+  /** Tour anchor (`data-tour`) on the knowledge popover trigger. */
+  knowledgeAnchor?: string;
+  /** Tour anchor (`data-tour`) on the memory popover trigger. */
+  memoryAnchor?: string;
 }
 
 /**
@@ -34,7 +42,21 @@ export interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivEle
  * />
  */
 const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsProps>(
-  ({ 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;
 
@@ -47,6 +69,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={statusUpdateAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >
@@ -77,6 +100,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={toolCallsAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >
@@ -109,6 +133,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={knowledgeAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >
@@ -139,6 +164,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={memoryAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >

package/src/components/agent-response/components/HITLSection.tsx

@@ -65,7 +65,7 @@ const HITLSection = React.forwardRef<HTMLDivElement, HITLSectionProps>(
         {/* Collapsible header */}
         <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"
         >
           {isExpanded ? (
             <ChevronDown className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />

package/src/components/agent-response/components/MetadataRow.tsx

@@ -32,6 +32,16 @@ export interface MetadataRowProps extends React.HTMLAttributes<HTMLDivElement> {
   status: AgentResponseStatus;
   /** Elapsed time in seconds */
   elapsedTime: number;
+  /** Tour anchor (`data-tour`) on the thinking expand/collapse toggle button. */
+  thinkingToggleAnchor?: string;
+  /** Tour anchor forwarded to the status updates popover trigger inside ActivityIndicators. */
+  statusUpdateAnchor?: string;
+  /** Tour anchor forwarded to the tool calls popover trigger inside ActivityIndicators. */
+  toolCallsAnchor?: string;
+  /** Tour anchor forwarded to the knowledge popover trigger inside ActivityIndicators. */
+  knowledgeAnchor?: string;
+  /** Tour anchor forwarded to the memory popover trigger inside ActivityIndicators. */
+  memoryAnchor?: string;
 }
 
 /**
@@ -65,6 +75,11 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
       statusContent,
       status,
       elapsedTime,
+      thinkingToggleAnchor,
+      statusUpdateAnchor,
+      toolCallsAnchor,
+      knowledgeAnchor,
+      memoryAnchor,
       className,
       ...props
     },
@@ -127,8 +142,9 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
         {/* Left content - clickable when there's thinking */}
         {hasThinking ? (
           <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"
           >
             {leftContent}
           </button>
@@ -150,6 +166,10 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
           knowledge={knowledge}
           memory={memory}
           statusUpdates={statusUpdates}
+          statusUpdateAnchor={statusUpdateAnchor}
+          toolCallsAnchor={toolCallsAnchor}
+          knowledgeAnchor={knowledgeAnchor}
+          memoryAnchor={memoryAnchor}
         />
       </div>
     );

package/src/components/agent-response/components/ThinkingSection.tsx

@@ -45,7 +45,7 @@ const ThinkingStepItem: React.FC<ThinkingStepItemProps> = ({ step, renderMarkdow
     <div className="border-b border-border/50 last:border-b-0">
       <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` }}
       >
         {isCollapsed ? (

package/src/components/agent-response/index.ts

@@ -7,7 +7,11 @@
 
 // Main component
 export { AgentResponse } from "./AgentResponse";
-export type { AgentResponseProps, AgentResponseClassNames } from "./AgentResponse";
+export type {
+  AgentResponseProps,
+  AgentResponseClassNames,
+  AgentResponseAnchors,
+} from "./AgentResponse";
 
 // Sub-components (for advanced customization)
 export {

package/src/components/agent-timeline/AgentTimeline.tsx

@@ -167,7 +167,7 @@ export function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "3
               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"
+                  : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-hover"
               }`}
               title={`${isActive ? "Hide" : "Show only"} ${tc.label}`}
             >
@@ -195,14 +195,14 @@ export function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "3
           <>
             <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"
             >
               <ChevronsDownUp className="w-3 h-3" />
             </button>
             <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"
             >
               <ChevronsUpDown className="w-3 h-3" />

package/src/components/agent-timeline/TimelineAgentBlock.tsx

@@ -50,7 +50,7 @@ export function TimelineAgentBlock({
       {/* Agent header */}
       <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"
       >
         {isCollapsed ? (
           <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />

package/src/components/user-prompt-input/UserPromptInput.tsx

@@ -155,6 +155,7 @@ export const UserPromptInput = React.forwardRef<
       enableTags = false,
       onTagCreate,
       onTagDelete,
+      anchors,
       className,
       ...props
     },
@@ -298,6 +299,7 @@ export const UserPromptInput = React.forwardRef<
           {isSubmitting && onStop ? (
             <Tooltip content={stopTooltip} disabled={!stopTooltip}>
               <IconButton
+                data-tour={anchors?.stopButton}
                 icon={<Square />}
                 variant="filled"
                 size="sm"
@@ -308,6 +310,7 @@ export const UserPromptInput = React.forwardRef<
             </Tooltip>
           ) : (
             <IconButton
+              data-tour={anchors?.sendButton}
               icon={
                 isSubmitting ? (
                   <Loader2 className="animate-spin" />

package/src/components/user-prompt-input/types.ts

@@ -42,6 +42,19 @@ export interface UserPromptInputProps
   onTagCreate?: (tag: string) => void;
   /** Callback when a tag is deleted */
   onTagDelete?: (tag: string) => void;
+  /** Tour anchors threaded onto internal sub-elements. */
+  anchors?: UserPromptInputAnchors;
+}
+
+/**
+ * Tour anchors (`data-tour` attribute values) for elements inside the
+ * UserPromptInput that the caller cannot otherwise reach.
+ */
+export interface UserPromptInputAnchors {
+  /** Send button (rendered when not submitting). */
+  sendButton?: string;
+  /** Stop button (rendered while submitting if `onStop` is provided). */
+  stopButton?: string;
 }
 
 export interface UserPromptInputRef {

package/src/index.ts

@@ -9,6 +9,8 @@ export {
   // Main component
   AgentResponse,
   type AgentResponseProps,
+  type AgentResponseClassNames,
+  type AgentResponseAnchors,
 
   // Sub-components (for advanced customization)
   ActivityIndicators,