チャットUIライブラリ比較

'use client';
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
  TypingIndicator,
} from '@chatscope/chat-ui-kit-react';
import { useState } from 'react';

const initialMessages = [
  { id: 1, text: 'こんにちは！何かお手伝いできますか？', sender: 'assistant' },
];

export function ChatscopeDemo() {
  const [messages, setMessages] = useState(initialMessages);
  const [isTyping, setIsTyping] = useState(false);

  const handleSend = (text: string) => {
    setMessages(prev => [...prev, { id: Date.now(), text, sender: 'user' }]);
    setIsTyping(true);
    setTimeout(() => {
      setMessages(prev => [
        ...prev,
        { id: Date.now() + 1, text: 'ありがとうございます！', sender: 'assistant' },
      ]);
      setIsTyping(false);
    }, 1500);
  };

  return (
    <div style={{ height: '400px' }}>
      <MainContainer>
        <ChatContainer>
          <MessageList
            typingIndicator={isTyping ? <TypingIndicator content="入力中..." /> : null}
          >
            {messages.map(msg => (
              <Message
                key={msg.id}
                model={{
                  message: msg.text,
                  sender: msg.sender,
                  direction: msg.sender === 'user' ? 'outgoing' : 'incoming',
                  position: 'single',
                }}
              />
            ))}
          </MessageList>
          <MessageInput
            placeholder="メッセージを入力..."
            onSend={handleSend}
            attachButton={false}
          />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

'use client';
import 'react-chat-elements/dist/main.css';
import { MessageBox } from 'react-chat-elements';
import { useState } from 'react';

const initialMessages = [
  { id: 1, text: 'こんにちは！', sender: 'assistant' },
];

export function ReactChatElementsDemo() {
  const [messages, setMessages] = useState(initialMessages);
  const [input, setInput] = useState('');

  const handleSend = () => {
    if (!input.trim()) return;
    setMessages(prev => [...prev, { id: Date.now(), text: input, sender: 'user' }]);
    setInput('');
    setTimeout(() => {
      setMessages(prev => [
        ...prev,
        { id: Date.now() + 1, text: 'ありがとうございます！', sender: 'assistant' },
      ]);
    }, 1000);
  };

  return (
    <div className="flex flex-col h-96 border rounded-lg overflow-hidden">
      <div className="flex-1 overflow-y-auto p-4 bg-gray-50">
        {messages.map(msg => (
          <MessageBox
            key={msg.id}
            id={msg.id}
            position={msg.sender === 'user' ? 'right' : 'left'}
            type="text"
            text={msg.text}
            date={new Date()}
            title={msg.sender === 'user' ? 'ユーザー' : 'アシスタント'}
            focus={false}
            forwarded={false}
            replyButton={false}
            removeButton={false}
            status="sent"
            notch={true}
            retracted={false}
          />
        ))}
      </div>
      <div className="flex gap-2 p-3 border-t">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSend()}
          placeholder="メッセージを入力..."
          className="flex-1 px-3 py-2 border rounded-full text-sm"
        />
        <button onClick={handleSend} className="px-4 py-2 bg-blue-600 text-white rounded-full text-sm">
          送信
        </button>
      </div>
    </div>
  );
}

'use client';
import { useState } from 'react';

const initialMessages = [
  { id: 1, text: 'こんにちは！何かお手伝いできますか？', sender: 'assistant' },
];

export function CustomChatDemo() {
  const [messages, setMessages] = useState(initialMessages);
  const [input, setInput] = useState('');

  const handleSend = () => {
    if (!input.trim()) return;
    setMessages(prev => [...prev, { id: Date.now(), text: input, sender: 'user' }]);
    setInput('');
    setTimeout(() => {
      setMessages(prev => [
        ...prev,
        { id: Date.now() + 1, text: 'ありがとうございます！', sender: 'assistant' },
      ]);
    }, 1000);
  };

  return (
    <div className="flex flex-col h-96 border border-gray-200 rounded-lg overflow-hidden">
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map(msg => (
          <div key={msg.id} className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[75%] px-4 py-2 rounded-2xl text-sm ${
              msg.sender === 'user'
                ? 'bg-indigo-600 text-white rounded-br-sm'
                : 'bg-white border border-gray-200 text-gray-800 rounded-bl-sm'
            }`}>
              {msg.text}
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-2 p-3 border-t">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSend()}
          placeholder="メッセージを入力..."
          className="flex-1 px-4 py-2 bg-gray-100 rounded-full text-sm focus:outline-none"
        />
        <button onClick={handleSend} className="px-4 py-2 bg-indigo-600 text-white rounded-full text-sm">
          送信
        </button>
      </div>
    </div>
  );
}