Skip to main content

​
ChatBox Component

The ChatBox component provides an interactive AI-powered chat interface that can answer questions about the portfolio owner’s experience, projects, and skills. It supports blog-specific context for AI summarization.

​
Import

import ChatBox from '../components/ChatBox';

​
Usage

import { useState } from 'react';
import ChatBox from '../components/ChatBox';

function App() {
  const [isChatOpen, setIsChatOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsChatOpen(true)}>Open Chat</button>
      <ChatBox 
        isOpen={isChatOpen}
        onClose={() => setIsChatOpen(false)}
        isDarkMode={true}
      />
    </>
  );
}

​
Props

The component accepts props defined by the ChatBoxProps interface:
​
isOpen
boolean
required
Controls the visibility of the chat box. When false, the component returns null.
​
onClose
() => void
required
Callback function invoked when the user closes the chat box (via close button or actions).
​
isDarkMode
boolean
default:"true"
Enables dark mode styling for the chat interface. Defaults to true.
​
initialMessage
string
An optional initial message to send automatically when the chat opens. Useful for triggering AI summaries.
​
blogContext
BlogContext
Optional blog context object for AI summarization. When provided, the AI will have context about a specific blog post.

​
Features

​
AI Integration

The ChatBox integrates with OpenAI’s GPT-4o-mini model to provide intelligent responses about the portfolio owner’s background. 
// Example with blog context
const blogContext = {
  title: "My Latest Project",
  content: "Full markdown content...",
  excerpt: "A brief summary..."
};

<ChatBox
  isOpen={true}
  onClose={handleClose}
  blogContext={blogContext}
  initialMessage="Please summarize this blog post for me."
/>

​
Message Types

The component uses the Message type for chat messages:
​
role
'user' | 'assistant' | 'system'
required
The role of the message sender
​
content
string
required
The text content of the message

​
Fullscreen Mode

The chat box supports fullscreen mode on desktop devices:
  • Click the maximize icon to enter fullscreen
  • Click the minimize icon to exit fullscreen
  • Mobile devices always display in full screen

​
Chat Management

  • Clear Chat: Resets the conversation while maintaining blog context if present
  • Auto-scroll: Automatically scrolls to the latest message
  • Loading States: Shows animated loading indicator during AI responses

​
Styling

The component uses Tailwind CSS classes and supports:
  • Dark theme with gradient backgrounds
  • Responsive design (mobile and desktop)
  • Markdown rendering with custom styles
  • Smooth animations and transitions

​
Dependencies

  • react-markdown - For rendering AI responses with markdown support
  • lucide-react - For icons (X, Trash2, Maximize2, Minimize2)
  • Custom AIInput component for message input
  • System prompt loader for AI context

​
API Configuration

The component automatically configures the API URL based on environment: 
const API_URL = process.env.NODE_ENV === 'development' 
  ? '/.netlify/functions/chat'
  : 'https://ethanclinick.netlify.app/.netlify/functions/chat';

​
Helper Functions

​
formatAIResponse

Internal helper that formats AI responses for better readability:
  • Adds proper spacing between sections
  • Formats code blocks with syntax highlighting
  • Ensures proper spacing around lists and headings

​
Source Location

src/components/ChatBox.tsx:33

Build docs developers (and LLMs) love

Get started for freeTalk to us