Python: DevUI: Agent responses have line breaks at arbitrary characters instead of at word boundaries

As seen here:

This seems to be caused by the break-all class that is applied to the div that wraps around the agent responses:

agent-framework/python/packages/devui/frontend/src/components/features/agent/agent-view.tsx

Lines 118 to 139 in 1fbdcf8

    
                     <div className="relative group"> 
        
                       <div 
        
                         className={`rounded px-3 py-2 text-sm break-all ${ 
        
                           isUser 
        
                             ? "bg-primary text-primary-foreground" 
        
                             : isError 
        
                             ? "bg-orange-50 dark:bg-orange-950/50 text-orange-800 dark:text-orange-200 border border-orange-200 dark:border-orange-800" 
        
                             : "bg-muted" 
        
                         }`} 
        
                       > 
        
                         {isError && ( 
        
                           <div className="flex items-start gap-2 mb-2"> 
        
                             <AlertCircle className="h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0" /> 
        
                             <span className="font-medium text-sm"> 
        
                               Unable to process request 
        
                             </span> 
        
                           </div> 
        
                         )} 
        
                         <div className={isError ? "text-xs leading-relaxed break-all" : ""}> 
        
                           <OpenAIMessageRenderer item={item} /> 
        
                         </div> 
        
                       </div>

Within the agent responses, break-word is applied, but the Tailwind classes for break-all and break-word don't cascade as I would have thought, and this has the result of break-all applying to the content. I do not know if there will be unexpected consequences from simply removing break-all from the container div though.

Navigation Menu

Repository navigation

Python: DevUI: Agent responses have line breaks at arbitrary characters instead of at word boundaries #1768

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<div className="relative group">
	<div
	className={`rounded px-3 py-2 text-sm break-all ${
	isUser
	? "bg-primary text-primary-foreground"
	: isError
	? "bg-orange-50 dark:bg-orange-950/50 text-orange-800 dark:text-orange-200 border border-orange-200 dark:border-orange-800"
	: "bg-muted"
	}`}
	>
	{isError && (
	<div className="flex items-start gap-2 mb-2">
	<AlertCircle className="h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0" />
	<span className="font-medium text-sm">
	Unable to process request
	</span>
	</div>
	)}
	<div className={isError ? "text-xs leading-relaxed break-all" : ""}>
	<OpenAIMessageRenderer item={item} />
	</div>
	</div>

Python: DevUI: Agent responses have line breaks at arbitrary characters instead of at word boundaries #1768

Description

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions