Merge pull request #482 from miurla/fix/collapsible-message-icon-spacing

Remove icon space when showIcon is false

Author: miurla

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cursor
+.cursor

components/chat-panel.tsx

@@ -90,7 +90,7 @@ export function ChatPanel({
         onSubmit={handleSubmit}
         className={cn(
           'max-w-3xl w-full mx-auto',
-          messages.length > 0 ? 'px-2 py-4' : 'px-6'
+          messages.length > 0 ? 'px-2 pb-4' : 'px-6'
         )}
       >
         <div className="relative flex flex-col w-full gap-2 bg-muted rounded-3xl border border-input">

components/chat.tsx

@@ -63,7 +63,7 @@ export function Chat({
   }
 
   return (
-    <div className="flex flex-col w-full max-w-3xl pt-14 pb-60 mx-auto stretch">
+    <div className="flex flex-col w-full max-w-3xl pt-14 pb-40 mx-auto stretch">
       <ChatMessages
         messages={messages}
         data={data}

components/collapsible-message.tsx

@@ -33,16 +33,17 @@ export function CollapsibleMessage({
 
   return (
     <div className="flex gap-3">
-      <div className="relative flex flex-col items-center">
-        <div className={cn('mt-[10px] w-5', role === 'assistant' && 'mt-4')}>
-          {showIcon &&
-            (role === 'user' ? (
+      {showIcon && (
+        <div className="relative flex flex-col items-center">
+          <div className={cn('mt-[10px] w-5', role === 'assistant' && 'mt-4')}>
+            {role === 'user' ? (
               <UserCircle2 size={20} className="text-muted-foreground" />
             ) : (
               <IconLogo className="size-5" />
-            ))}
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       {isCollapsible ? (
         <div

components/related-questions.tsx

@@ -74,6 +74,7 @@ export const RelatedQuestions: React.FC<RelatedQuestionsProps> = ({
       header={header}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
+      showIcon={false}
     >
       <div className="flex flex-wrap">
         {Array.isArray(relatedQuestions.items) ? (

components/retrieve-section.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { Section, ToolArgsSection } from '@/components/section'
 import { SearchResults } from '@/components/search-results'
+import { Section, ToolArgsSection } from '@/components/section'
 import { SearchResults as SearchResultsType } from '@/lib/types'
 import { ToolInvocation } from 'ai'
-import { DefaultSkeleton } from './default-skeleton'
 import { CollapsibleMessage } from './collapsible-message'
+import { DefaultSkeleton } from './default-skeleton'
 
 interface RetrieveSectionProps {
   tool: ToolInvocation
@@ -32,6 +32,7 @@ export function RetrieveSection({
       header={header}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
+      showIcon={false}
     >
       {!isLoading && data ? (
         <Section title="Sources">

components/search-section.tsx

@@ -47,6 +47,7 @@ export function SearchSection({
       header={header}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
+      showIcon={false}
     >
       {searchResults &&
         searchResults.images &&

components/tool-section.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { ToolInvocation } from 'ai'
+import RetrieveSection from './retrieve-section'
 import { SearchSection } from './search-section'
 import { VideoSearchSection } from './video-search-section'
-import RetrieveSection from './retrieve-section'
 
 interface ToolSectionProps {
   tool: ToolInvocation

components/video-search-section.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { DefaultSkeleton } from './default-skeleton'
-import { Section, ToolArgsSection } from './section'
 import type { SerperSearchResults } from '@/lib/types'
 import { ToolInvocation } from 'ai'
-import { VideoSearchResults } from './video-search-results'
 import { CollapsibleMessage } from './collapsible-message'
+import { DefaultSkeleton } from './default-skeleton'
+import { Section, ToolArgsSection } from './section'
+import { VideoSearchResults } from './video-search-results'
 
 interface VideoSearchSectionProps {
   tool: ToolInvocation
@@ -32,6 +32,7 @@ export function VideoSearchSection({
       header={header}
       isOpen={isOpen}
       onOpenChange={onOpenChange}
+      showIcon={false}
     >
       {!isLoading && searchResults ? (
         <Section title="Videos">