improvement: sidebar, chat

Author: emir-karabeg

apps/sim/app/_styles/globals.css

@@ -19,6 +19,22 @@
 
 .sidebar-container {
   width: var(--sidebar-width);
+  transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.sidebar-container span,
+.sidebar-container .text-small {
+  transition: opacity 120ms ease;
+  white-space: nowrap;
+}
+
+.sidebar-container[data-collapsed] span,
+.sidebar-container[data-collapsed] .text-small {
+  opacity: 0;
+}
+
+.sidebar-container.is-resizing {
+  transition: none;
 }
 
 .panel-container {

apps/sim/app/layout.tsx

@@ -110,13 +110,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   if (stored) {
                     var parsed = JSON.parse(stored);
                     var state = parsed && parsed.state;
-                    var width = state && state.sidebarWidth;
-                    var maxSidebarWidth = window.innerWidth * 0.3;
+                    var isCollapsed = state && state.isCollapsed;
 
-                    if (width >= 248 && width <= maxSidebarWidth) {
-                      document.documentElement.style.setProperty('--sidebar-width', width + 'px');
-                    } else if (width > maxSidebarWidth) {
-                      document.documentElement.style.setProperty('--sidebar-width', maxSidebarWidth + 'px');
+                    if (isCollapsed) {
+                      document.documentElement.style.setProperty('--sidebar-width', '51px');
+                    } else {
+                      var width = state && state.sidebarWidth;
+                      var maxSidebarWidth = window.innerWidth * 0.3;
+
+                      if (width >= 248 && width <= maxSidebarWidth) {
+                        document.documentElement.style.setProperty('--sidebar-width', width + 'px');
+                      } else if (width > maxSidebarWidth) {
+                        document.documentElement.style.setProperty('--sidebar-width', maxSidebarWidth + 'px');
+                      }
                     }
                   }
                 } catch (e) {

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronDown } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import type { ToolCallStatus } from '../../../../types'
+import { getAgentIcon } from '../../utils'
+import { ToolCallItem } from './tool-call-item'
+
+interface ToolCallData {
+  id: string
+  toolName: string
+  displayTitle: string
+  status: ToolCallStatus
+}
+
+interface AgentGroupProps {
+  agentName: string
+  agentLabel: string
+  tools: ToolCallData[]
+}
+
+export function AgentGroup({ agentName, agentLabel, tools }: AgentGroupProps) {
+  const AgentIcon = getAgentIcon(agentName)
+  const [expanded, setExpanded] = useState(true)
+  const hasTools = tools.length > 0
+
+  return (
+    <div className='flex flex-col gap-1.5'>
+      <button
+        type='button'
+        onClick={hasTools ? () => setExpanded((prev) => !prev) : undefined}
+        className={cn('flex items-center gap-[8px]', hasTools && 'cursor-pointer')}
+      >
+        <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+          <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
+        </div>
+        <span className='font-[var(--sidebar-font-weight)] text-[14px] text-[var(--text-body)]'>
+          {agentLabel}
+        </span>
+        {hasTools && (
+          <ChevronDown
+            className={cn(
+              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              !expanded && '-rotate-90'
+            )}
+          />
+        )}
+      </button>
+      {hasTools && expanded && (
+        <div className='flex flex-col gap-1.5'>
+          {tools.map((tool) => (
+            <ToolCallItem
+              key={tool.id}
+              toolName={tool.toolName}
+              displayTitle={tool.displayTitle}
+              status={tool.status}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/index.ts

@@ -0,0 +1 @@
+export { AgentGroup } from './agent-group'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx

@@ -0,0 +1,52 @@
+import { Loader } from '@/components/emcn'
+import type { ToolCallStatus } from '../../../../types'
+import { getToolIcon } from '../../utils'
+
+function CircleCheck({ className }: { className?: string }) {
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx='8' cy='8' r='6.5' stroke='currentColor' strokeWidth='1.25' />
+      <path
+        d='M5.5 8.5L7 10L10.5 6.5'
+        stroke='currentColor'
+        strokeWidth='1.25'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+interface ToolCallItemProps {
+  toolName: string
+  displayTitle: string
+  status: ToolCallStatus
+}
+
+export function ToolCallItem({ toolName, displayTitle, status }: ToolCallItemProps) {
+  const Icon = getToolIcon(toolName)
+
+  return (
+    <div className='flex items-center gap-[8px] pl-[24px]'>
+      <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+        {status === 'executing' ? (
+          <Loader className='h-[16px] w-[16px] text-[var(--text-icon)]' animate />
+        ) : Icon ? (
+          <Icon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
+        ) : (
+          <CircleCheck className='h-[16px] w-[16px] text-[var(--text-icon)]' />
+        )}
+      </div>
+      <span className='font-[var(--sidebar-font-weight)] text-[14px] text-[var(--text-body)]'>
+        {displayTitle}
+      </span>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -39,12 +39,12 @@ function extractTextContent(node: React.ReactNode): string {
 
 const PROSE_CLASSES = cn(
   'prose prose-base dark:prose-invert max-w-none',
-  'font-[family-name:var(--font-inter)] antialiased break-words font-[420] tracking-[0]',
+  'font-[family-name:var(--font-inter)] antialiased break-words font-[430] tracking-[0]',
   'prose-headings:font-[600] prose-headings:tracking-[0] prose-headings:text-[var(--text-primary)]',
   'prose-headings:mb-3 prose-headings:mt-6 first:prose-headings:mt-0',
-  'prose-p:text-[16px] prose-p:leading-7 prose-p:text-[var(--text-primary)]',
+  'prose-p:text-[15px] prose-p:leading-[25px] prose-p:text-[var(--text-primary)]',
   'first:prose-p:mt-0 last:prose-p:mb-0',
-  'prose-li:text-[16px] prose-li:leading-7 prose-li:text-[var(--text-primary)]',
+  'prose-li:text-[15px] prose-li:leading-[25px] prose-li:text-[var(--text-primary)]',
   'prose-li:my-1',
   'prose-ul:my-4 prose-ol:my-4',
   'prose-strong:font-[600] prose-strong:text-[var(--text-primary)]',
@@ -106,7 +106,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
 
     if (!codeString) {
       return (
-        <pre className='not-prose my-6 overflow-x-auto rounded-lg bg-[var(--surface-5)] p-4 font-[420] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:bg-[#1F1F1F]'>
+        <pre className='not-prose my-6 overflow-x-auto rounded-lg bg-[var(--surface-5)] p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:bg-[#1F1F1F]'>
           {children}
         </pre>
       )
@@ -125,7 +125,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
         )}
         <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[#1F1F1F]'>
           <pre
-            className='m-0 overflow-x-auto whitespace-pre p-4 font-[420] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
+            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
             dangerouslySetInnerHTML={{ __html: html }}
           />
         </div>
@@ -156,13 +156,13 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
   li({ children, className }) {
     if (className?.includes('task-list-item')) {
       return (
-        <li className='flex list-none items-start gap-2 text-[16px] text-[var(--text-primary)] leading-7'>
+        <li className='flex list-none items-start gap-2 text-[15px] text-[var(--text-primary)] leading-[25px]'>
           {children}
         </li>
       )
     }
     return (
-      <li className='my-1 text-[16px] text-[var(--text-primary)] leading-7 marker:text-[var(--text-primary)]'>
+      <li className='my-1 text-[15px] text-[var(--text-primary)] leading-[25px] marker:text-[var(--text-primary)]'>
         {children}
       </li>
     )

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/index.ts

@@ -1,4 +1,3 @@
+export { AgentGroup } from './agent-group'
 export { ChatContent } from './chat-content'
 export { Options } from './options'
-export { Subagent } from './subagent'
-export { ToolCall } from './tool-calls'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx

@@ -15,7 +15,7 @@ export function Options({ items, onSelect }: OptionsProps) {
           key={item.id}
           type='button'
           onClick={() => onSelect?.(item.id)}
-          className='rounded-full border border-[var(--divider)] bg-[var(--bg)] px-3.5 py-1.5 font-[420] font-[family-name:var(--font-inter)] text-[14px] text-[var(--text-primary)] leading-5 transition-colors hover:bg-[var(--surface-5)]'
+          className='rounded-full border border-[var(--divider)] bg-[var(--bg)] px-3.5 py-1.5 font-[430] font-[family-name:var(--font-inter)] text-[14px] text-[var(--text-primary)] leading-5 transition-colors hover:bg-[var(--surface-5)]'
         >
           {item.label}
         </button>