From dd26a2fda50c26cbd295d95f03b1ed0c880f3aaf Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Wed, 15 Apr 2026 14:27:13 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=A9=20style:=20Agent=20Side=20Panel=20?= =?UTF-8?q?Layout=20and=20Consistency=20Fixes=20(#12676)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: Update padding in ActionsPanel, ModelPanel, and AdvancedPanel for improved layout * Adjusted padding in ActionsPanel, ModelPanel, and AdvancedPanel components to enhance visual consistency and layout. * Changed `py-4` to `pt-2` in the main container of each panel to reduce vertical spacing and improve overall design aesthetics. * style: Update text size in MCPTool component for improved accessibility * Changed text size in the MCPTool component to `text-sm` for better readability and consistency across the UI. * This adjustment enhances the user experience by ensuring that text is appropriately sized for various display settings. * style: Enhance layout and accessibility in ActionsInput, ActionsPanel, and AgentPanel components * Updated the layout in ActionsInput to improve flex properties and ensure better responsiveness. * Refined the structure of ActionsPanel for a more consistent visual hierarchy and added accessibility features. * Adjusted the AgentPanel form layout for improved usability and streamlined component integration. * Changed text size in Dropdown component to `text-sm` for better readability across the UI. * style: Refactor layout in ActionsInput component for improved responsiveness * Updated the layout of the ActionsInput component to enhance flex properties and ensure better responsiveness. * Adjusted the textarea styling for improved usability and consistency in design. * Removed commented-out code related to example functionality to clean up the component structure. * refactor: Simplify single line code detection in MarkdownComponents * Introduced a new utility function `isSingleLineCode` to streamline the logic for determining if code is a single line. * Updated references in the `MarkdownCode` and `MarkdownCodeNoExecution` components to use the new utility function for improved readability and maintainability. * Enhanced the `processChildren` function in the Markdown editor to handle non-code elements more effectively. --- .../Messages/Content/MarkdownComponents.tsx | 14 +- .../components/Prompts/editor/Markdown.tsx | 3 + .../SidePanel/Agents/ActionsInput.tsx | 26 +--- .../SidePanel/Agents/ActionsPanel.tsx | 133 +++++++++--------- .../Agents/Advanced/AdvancedPanel.tsx | 6 +- .../SidePanel/Agents/AgentPanel.tsx | 117 ++++++++------- .../components/SidePanel/Agents/MCPTool.tsx | 2 +- .../SidePanel/Agents/ModelPanel.tsx | 4 +- packages/client/src/components/Dropdown.tsx | 2 +- 9 files changed, 155 insertions(+), 152 deletions(-) diff --git a/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx b/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx index 2a47af30e4..1f2a3ff594 100644 --- a/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx +++ b/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx @@ -17,6 +17,16 @@ type TCodeProps = { children: React.ReactNode; }; +const isSingleLineCode = (children: React.ReactNode): boolean => { + if (typeof children === 'string') { + return !children.includes('\n'); + } + if (Array.isArray(children)) { + return children.every((child) => typeof child === 'string' && !child.includes('\n')); + } + return false; +}; + export const code: React.ElementType = memo(function MarkdownCode({ className, children, @@ -29,7 +39,7 @@ export const code: React.ElementType = memo(function MarkdownCode({ const lang = match && match[1]; const isMath = lang === 'math'; const isMermaid = lang === 'mermaid'; - const isSingleLine = typeof children === 'string' && children.split('\n').length === 1; + const isSingleLine = isSingleLineCode(children); const { getNextIndex, resetCounter } = useCodeBlockContext(); const blockIndex = useRef(getNextIndex(isMath || isMermaid || isSingleLine)).current; @@ -78,7 +88,7 @@ export const codeNoExecution: React.ElementType = memo(function MarkdownCodeNoEx } else if (lang === 'mermaid') { const content = typeof children === 'string' ? children : String(children); return {content}; - } else if (typeof children === 'string' && children.split('\n').length === 1) { + } else if (isSingleLineCode(children)) { return ( {children} diff --git a/client/src/components/Prompts/editor/Markdown.tsx b/client/src/components/Prompts/editor/Markdown.tsx index 3be7d3a702..19a039abd7 100644 --- a/client/src/components/Prompts/editor/Markdown.tsx +++ b/client/src/components/Prompts/editor/Markdown.tsx @@ -44,6 +44,9 @@ const processChildren = (children: React.ReactNode): React.ReactNode => { if (React.isValidElement(children)) { const element = children as React.ReactElement<{ children?: React.ReactNode }>; + if (typeof element.type !== 'string' || element.type === 'code') { + return children; + } if (element.props.children) { return React.cloneElement(element, { ...element.props, diff --git a/client/src/components/SidePanel/Agents/ActionsInput.tsx b/client/src/components/SidePanel/Agents/ActionsInput.tsx index d99b5e8672..82b7c7f07b 100644 --- a/client/src/components/SidePanel/Agents/ActionsInput.tsx +++ b/client/src/components/SidePanel/Agents/ActionsInput.tsx @@ -202,7 +202,7 @@ export default function ActionsInput({ return ( <> -
+
- {/* TODO: Implement examples functionality -
- -
- */}
-
-
+
+