@optilogic/chat 1.3.2 → 1.3.3

package/package.json

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

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

@@ -15,6 +15,13 @@ import type { HITLInteraction } from "../hitl-interactions";
 import { AgentTimeline, createTimelineUIState } from "../agent-timeline";
 import type { TimelineUIState } from "../agent-timeline";
 
+export interface AgentResponseClassNames {
+  /** Classes for the inner container (border, rounded corners, overflow) */
+  container?: string;
+  /** Classes for the response content section (background, padding) */
+  response?: string;
+}
+
 export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The response state to render */
   state: AgentResponseState;
@@ -98,6 +105,22 @@ export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement>
    * Defaults to "300px". Set to "none" to disable the constraint.
    */
   timelineMaxHeight?: string;
+
+  /**
+   * Class name overrides for internal elements.
+   * Use this to customize the container border/background or response section styling.
+   *
+   * @example
+   * // Transparent background and borders
+   * <AgentResponse
+   *   state={state}
+   *   classNames={{
+   *     container: "border-transparent",
+   *     response: "bg-transparent",
+   *   }}
+   * />
+   */
+  classNames?: AgentResponseClassNames;
 }
 
 /**
@@ -151,6 +174,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
       renderMarkdown,
       renderThinkingMarkdown,
       timelineMaxHeight,
+      classNames,
       className,
       ...props
     },
@@ -241,7 +265,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
         {...props}
       >
         {/* Message Content Container */}
-        <div className="border border-border rounded-lg overflow-hidden">
+        <div className={cn("border border-border rounded-lg overflow-hidden", classNames?.container)}>
           {/* Metadata Row - show if there's any metadata or thinking */}
           {showMetadataRow && (
             <>
@@ -297,7 +321,8 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
             <div
               className={cn(
                 "bg-muted/50 p-4",
-                showMetadataRow && "border-t border-border"
+                showMetadataRow && "border-t border-border",
+                classNames?.response
               )}
             >
               {renderMarkdown ? (

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

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