fix: sizing

Author: rob-at-cortex

src/components/Chat/ChatInterface.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChatDemo } from './demo'
+import { ChatDemoLongMessages } from './demo-long-messages'
 
 const meta: Meta<typeof ChatDemo> = {
   title: 'Chat/Chat Interface',
@@ -15,3 +16,15 @@ type Story = StoryObj<typeof ChatDemo>
 export const Default: Story = {
   name: 'Clean Interface with File Upload & Bottom Capabilities',
 }
+
+export const LongMessages: StoryObj<typeof ChatDemoLongMessages> = {
+  render: () => <ChatDemoLongMessages />,
+  name: 'Long Text Messages',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates how the chat interface handles very long text messages with proper width constraints and text wrapping.',
+      },
+    },
+  },
+}

src/components/Chat/ChatInterface.tsx

@@ -209,17 +209,17 @@ export function ChatInterface({
               return (
                 <div key={index} className="mb-2 p-2 bg-background/50 rounded-lg">
                   <div className="flex items-center gap-2">
-                    {getFileIcon(filePart.mimeType || 'application/octet-stream')}
+                    {getFileIcon(filePart.mediaType || 'application/octet-stream')}
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium truncate">
-                        {filePart.name || filePart.url?.split('/').pop() || 'File'}
+                        {filePart.filename || filePart.url?.split('/').pop() || 'File'}
                       </p>
-                      {filePart.size && (
+                      {/* {filePart.size && (
                         <p className="text-xs opacity-70">{formatFileSize(filePart.size)}</p>
                       )}
                       {filePart.mimeType && (
                         <p className="text-xs opacity-70">{filePart.mimeType}</p>
-                      )}
+                      )} */}
                     </div>
                     {filePart.url && (
                       <Button
@@ -403,7 +403,7 @@ export function ChatInterface({
   }
 
   return (
-    <Card className={`h-full flex flex-col shadow-sm ${className || ""}`}>
+    <Card className={`h-full flex flex-col shadow-sm max-w-4xl mx-auto ${className || ""}`}>
       {/* Chat Messages */}
       <ScrollArea 
         ref={scrollAreaRef}

src/components/Chat/CopilotInterface.stories.tsx

@@ -261,6 +261,7 @@ export const WithCapabilitiesDemo: Story = {
   name: 'Capabilities Demo',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'sales',
     title: 'Sales Copilot with Capabilities',
     messages: [
@@ -309,6 +310,7 @@ export const WithActiveChat: Story = {
   name: 'Active Chat Session',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'design',
     title: 'Design Copilot - Active Session',
     messages: [
@@ -452,6 +454,7 @@ export const AllCapabilitiesShowcase: Story = {
   name: 'All Capabilities Showcase',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'sales',
     title: 'All Capabilities Showcase',
     messages: [
@@ -500,6 +503,7 @@ export const InteractiveCapabilities: Story = {
   name: 'Interactive Capabilities',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'marketing',
     title: 'Marketing Copilot - Interactive',
     messages: [
@@ -548,6 +552,7 @@ export const EnhancedWithFileUpload: Story = {
   name: 'Enhanced with File Upload',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'engineering',
     title: 'Enhanced Engineering Copilot',
     enableFileUpload: true,
@@ -619,6 +624,7 @@ export const LongChatHistory: Story = {
   name: 'Long Chat History',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'engineering',
     title: 'Engineering Copilot',
     messages: [
@@ -707,6 +713,7 @@ export const EnhancedFeaturesShowcase: Story = {
   name: 'Enhanced Features Showcase',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'engineering',
     title: 'Enhanced AI Assistant',
     enableFileUpload: true,
@@ -818,6 +825,7 @@ export const FileUploadDemo: Story = {
   name: 'File Upload Demo',
   args: {
     ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
     initialTeam: 'design',
     title: 'File Upload Assistant',
     enableFileUpload: true,
@@ -981,3 +989,149 @@ export const NoDataProvided: Story = {
     },
   },
 }
+
+export const LongTextMessages: Story = {
+  name: 'Long Text Messages',
+  args: {
+    ...baseArgs,
+    enableAI: false, // Disable AI to use static messages
+    initialTeam: 'design',
+    title: 'Design Copilot - Long Messages Test',
+    messages: [
+      {
+        id: "1",
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "Can you provide me with a comprehensive overview of modern design systems, including their key components, implementation strategies, and best practices for maintaining consistency across large-scale digital products and platforms?"
+          }
+        ]
+      },
+      {
+        id: "2",
+        role: "assistant",
+        parts: [
+          {
+            type: "text",
+            text: `Absolutely! Here's a comprehensive overview of modern design systems:
+
+**What is a Design System?**
+
+A design system is a collection of reusable components, patterns, and guidelines that enable teams to build consistent, scalable user interfaces across products and platforms. It serves as the single source of truth for design decisions, bridging the gap between design and development.
+
+**Key Components of a Design System:**
+
+1. **Foundation Elements**
+   • Color palettes with semantic naming conventions
+   • Typography scales and font families
+   • Spacing and grid systems
+   • Iconography and illustration styles
+   • Motion and interaction principles
+
+2. **Component Library**
+   • Basic UI components (buttons, inputs, cards, etc.)
+   • Complex patterns (navigation, forms, modals)
+   • Layout components (headers, footers, sidebars)
+   • Data visualization components
+
+3. **Documentation**
+   • Usage guidelines and best practices
+   • Code examples and implementation guides
+   • Accessibility standards and requirements
+   • Brand voice and tone guidelines
+
+4. **Tokens**
+   • Design tokens for cross-platform consistency
+   • Semantic color definitions
+   • Spacing and sizing values
+   • Animation timing and easing functions
+
+**Implementation Strategies:**
+
+1. **Start Small, Scale Gradually**
+   Begin with core components and foundational elements before expanding to complex patterns. This allows for validation and refinement before wide adoption.
+
+2. **Cross-functional Collaboration**
+   Involve designers, developers, product managers, and content strategists from the beginning to ensure the system meets everyone's needs.
+
+3. **Tool Integration**
+   • Design tools: Figma, Sketch, Adobe XD
+   • Development: React, Vue, Angular component libraries
+   • Documentation: Storybook, Zeroheight, Notion
+   • Version control: Git for both design and code
+
+4. **Governance Model**
+   Establish clear processes for:
+   • Contributing new components
+   • Updating existing patterns
+   • Deprecating outdated elements
+   • Quality assurance and review
+
+**Best Practices for Maintenance:**
+
+1. **Version Control**
+   Treat your design system like any software product with proper versioning, changelogs, and migration guides.
+
+2. **Regular Audits**
+   Conduct quarterly reviews to identify inconsistencies, unused components, and opportunities for improvement.
+
+3. **Community Building**
+   Foster a community of contributors and users through:
+   • Regular office hours and workshops
+   • Feedback channels and feature requests
+   • Success stories and case studies
+
+4. **Measurement and Analytics**
+   Track adoption metrics, component usage, and developer satisfaction to guide future improvements.
+
+**Challenges and Solutions:**
+
+• **Adoption Resistance**: Combat by showing clear ROI and providing excellent developer experience
+• **Maintenance Overhead**: Invest in automation and clear governance processes
+• **Platform Differences**: Use design tokens and platform-specific implementations
+• **Keeping Current**: Regular updates and staying aligned with design trends
+
+**Tools and Technologies:**
+
+• **Design**: Figma with design system libraries, Tokens Studio
+• **Development**: Styled-components, Tailwind CSS, Emotion
+• **Documentation**: Storybook, Chromatic for visual testing
+• **Distribution**: NPM packages, CDNs, or internal registries
+
+Modern design systems are living, breathing entities that evolve with your product and organization. The key to success lies in treating them as products themselves, with dedicated resources, clear ownership, and continuous improvement based on user feedback.
+
+Would you like me to dive deeper into any specific aspect of design systems?`
+          }
+        ]
+      },
+      {
+        id: "3",
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "This is a test of an extremely long user message to ensure that the chat interface properly handles text wrapping and width constraints. When users write very lengthy messages that contain multiple sentences, paragraphs, and extensive content, the interface should maintain proper formatting and not cause the layout to break or become too wide. The message bubble should respect the maximum width constraints while ensuring that the text is still readable and properly formatted. This is especially important in professional environments where users might paste large amounts of text, write detailed specifications, or engage in lengthy discussions about complex topics. The chat interface should gracefully handle all of these scenarios while maintaining a clean, professional appearance that doesn't compromise the overall user experience or visual design of the application."
+          }
+        ]
+      },
+      {
+        id: "4",
+        role: "assistant",
+        parts: [
+          {
+            type: "text",
+            text: "Perfect! Your long message demonstrates exactly what we needed to test. As you can see, the chat interface now properly handles very long text messages by:\n\n• **Width Constraints**: The overall chat container is limited to max-w-4xl to prevent excessive horizontal expansion\n• **Text Wrapping**: Using break-words CSS property to ensure long words don't overflow\n• **Message Bubbles**: Individual messages respect the max-w-[80%] constraint while maintaining readability\n• **Whitespace Handling**: The whitespace-pre-wrap property preserves intentional line breaks\n• **Visual Hierarchy**: Long messages maintain proper spacing and visual separation\n\nThese improvements ensure that whether users are discussing brief topics or engaging in detailed technical conversations, the interface remains functional, visually appealing, and easy to read across all device sizes."
+          }
+        ]
+      }
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates how the CopilotInterface handles very long text messages with proper width constraints, text wrapping, and formatting to ensure readability and visual consistency.',
+      },
+    },
+  },
+}

src/components/Chat/demo-long-messages.tsx

@@ -0,0 +1,121 @@
+/**
+ * Demo component to test the ChatInterface with very long text messages
+ * to ensure proper width constraints and text wrapping
+ */
+
+import React, { useState } from 'react'
+import { CopilotInterface } from './CopilotInterface'
+import type { UIMessage } from 'ai'
+import { testCapabilities } from '../../test-data/capabilities'
+
+const longMessageDemo: UIMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    parts: [
+      { 
+        type: 'text', 
+        text: 'Can you write me a comprehensive analysis of the current state of artificial intelligence and machine learning technologies, including their applications, limitations, and future prospects?' 
+      }
+    ]
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    parts: [
+      { 
+        type: 'text', 
+        text: `Here's a comprehensive analysis of the current state of AI and ML technologies:
+
+**Current State of Artificial Intelligence and Machine Learning**
+
+Artificial Intelligence (AI) and Machine Learning (ML) have experienced unprecedented growth and adoption across virtually every industry in recent years. We're currently in what many experts consider the "golden age" of AI, characterized by breakthrough achievements in natural language processing, computer vision, and autonomous systems.
+
+**Key Applications:**
+
+1. **Natural Language Processing**: Large Language Models like GPT-4, Claude, and others have revolutionized how we interact with computers, enabling conversational AI, content generation, code assistance, and translation services that approach human-level quality.
+
+2. **Computer Vision**: AI systems can now accurately identify objects, faces, and scenes in images and videos, powering applications from medical imaging diagnosis to autonomous vehicle navigation and augmented reality experiences.
+
+3. **Recommendation Systems**: Platforms like Netflix, Amazon, and Spotify use sophisticated ML algorithms to personalize user experiences, driving significant business value and user engagement.
+
+4. **Healthcare**: AI is transforming medical diagnosis, drug discovery, and treatment planning, with systems that can detect diseases earlier and more accurately than human specialists in some cases.
+
+5. **Financial Services**: From fraud detection and algorithmic trading to credit scoring and risk assessment, ML models are integral to modern financial operations.
+
+**Current Limitations:**
+
+Despite remarkable progress, several significant limitations remain:
+
+1. **Data Quality and Bias**: AI systems are only as good as the data they're trained on, and biased or incomplete datasets can lead to unfair or inaccurate outcomes.
+
+2. **Interpretability**: Many advanced AI models, particularly deep neural networks, operate as "black boxes," making it difficult to understand how they arrive at specific decisions.
+
+3. **Energy Consumption**: Training and running large AI models requires substantial computational resources and energy, raising environmental concerns.
+
+4. **Generalization**: While AI excels in specific domains, achieving artificial general intelligence (AGI) that can perform any intellectual task remains elusive.
+
+5. **Safety and Alignment**: Ensuring AI systems behave safely and align with human values becomes increasingly challenging as they become more powerful.
+
+**Future Prospects:**
+
+The future of AI holds immense promise across multiple dimensions:
+
+1. **Multimodal AI**: Integration of text, image, audio, and video processing will enable more natural and comprehensive AI interactions.
+
+2. **Edge AI**: Deployment of AI directly on devices will reduce latency, improve privacy, and enable offline functionality.
+
+3. **AI-Assisted Scientific Discovery**: AI will accelerate research in fields like materials science, climate modeling, and space exploration.
+
+4. **Personalized Education**: Adaptive learning systems will provide customized educational experiences tailored to individual learning styles and pace.
+
+5. **Sustainable AI**: Development of more efficient algorithms and hardware will reduce the environmental impact of AI systems.
+
+The next decade will likely see AI becoming even more integrated into our daily lives, while addressing current limitations through improved techniques, better governance frameworks, and more sustainable practices. The key will be balancing innovation with responsible development to ensure AI benefits humanity as a whole.` 
+      }
+    ]
+  },
+  {
+    id: '3',
+    role: 'user',
+    parts: [
+      { 
+        type: 'text', 
+        text: 'This is an extremely long message to test the width constraints of the chat interface and ensure that even when I write a very long message that goes on and on and on, it still maintains proper formatting and doesn\'t cause the chat interface to become too wide or break the layout. The message should wrap properly and maintain readability while staying within the maximum width constraints that have been set for the chat bubbles. This is important for user experience and ensuring that the interface remains functional and visually appealing even with extensive text content.' 
+      }
+    ]
+  },
+  {
+    id: '4',
+    role: 'assistant',
+    parts: [
+      { 
+        type: 'text', 
+        text: 'Perfect! Your long message demonstrates exactly what we needed to test. As you can see, the chat interface now properly handles long text messages by:\n\n• Constraining the overall chat width with max-w-4xl\n• Using break-words to prevent text overflow\n• Maintaining the max-w-[80%] constraint on individual message bubbles\n• Preserving whitespace and line breaks with whitespace-pre-wrap\n• Ensuring proper text wrapping for readability\n\nThe interface remains visually appealing and functional regardless of message length, which is crucial for a good user experience.' 
+      }
+    ]
+  }
+]
+
+export function ChatDemoLongMessages() {
+  const [messages, setMessages] = useState<UIMessage[]>(longMessageDemo)
+
+  return (
+    <div className="h-screen w-full">
+      <CopilotInterface
+        messages={messages}
+        capabilities={testCapabilities}
+        enableFileUpload={true}
+        maxFileSize={10}
+        allowedFileTypes={['*']}
+        businessUnits={[]}
+        sessions={[]}
+        notifications={[]}
+        onNewChat={() => setMessages(longMessageDemo)}
+        onSessionSelect={() => {}}
+        onSessionDelete={() => {}}
+        showCapabilities={true}
+      />
+    </div>
+  )
+}