The AI Powered
Code Editor for
Modern Developers

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useAI } from '@sidian/core';

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}

export function ChatPanel() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const { sendMessage, streamResponse } = useAI();

  const handleSubmit = async (prompt: string) => {
    setIsLoading(true);
    const response = await sendMessage(prompt);

    setMessages(prev => [...prev, {
      id: crypto.randomUUID(),
      role: 'assistant',
      content: response.text,
      timestamp: new Date()
    }]);

    setIsLoading(false);
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}}
      animate={{ opacity: 1 }}}
      className="chat-panel"
    >
      {/* Render messages */}
      {messages.map(msg => (
        <MessageBubble key={msg.id} message={msg} />
      ))}
    </motion.div>
  );
}