@optilogic/chat 1.3.5 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/chat",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "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/core": "1.3.5",
-    "@optilogic/editor": "1.3.5"
+    "@optilogic/core": "1.3.7",
+    "@optilogic/editor": "1.3.7"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

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

@@ -111,7 +111,7 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
           <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 ? (
@@ -126,7 +126,7 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
             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"
@@ -141,7 +141,7 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
             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/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

@@ -144,7 +144,7 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
           <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>

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-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" />