メインコンテンツまでスキップ

Chat Conversationブロック

Chat Conversationコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなチャットインターフェースです。メッセージ表示、入力処理、リアルタイムメッセージングアプリケーションのための柔軟なカスタマイズオプションを備えた完全な会話ビューを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-chat-conversation-block

📖 使用法​

import {ChatConversation} from '@nodeblocks/frontend-chat-conversation-block';
ライブエディター
function BasicChatConversation() {
  const [messages, setMessages] = useState([
    {
      title: '田中太郎',
      content: 'こんにちは！今日の調子はいかがですか？',
      id: 'message-001',
      createdAt: '2025-02-01T10:00:00Z',
      isOwnMessage: false,
    },
    {
      title: 'あなた',
      content: 'こんにちは！とても調子いいです、ありがとうございます！',
      id: 'message-002',
      createdAt: '2025-02-01T10:01:00Z',
      isOwnMessage: true,
    },
  ]);

  return (
    <ChatConversation
      chatView={{
        heading: {
          avatar: {
            avatarColor: '4',
            avatarSize: 'large',
          },
          buttonHref: '/home',
        },
        isLoading: false,
      }}
      onInputChange={(text) => {
        console.log('入力が変更されました:', text);
      }}
      onMessageSubmit={(text) => {
        console.log('メッセージが送信されました:', text);
        setMessages(prev => [...prev, {
          title: 'あなた',
          content: text,
          id: 'message-' + Date.now(),
          createdAt: new Date().toISOString(),
          isOwnMessage: true,
        }]);
      }}
      commentInput={{
        isDisabled: false,
      }}
      commentSubmitButton={{
        isDisabled: false,
      }}
      messages={messages}
      labels={{
        chatViewHeadingButtonText: 'ホーム',
        chatViewHeadingText: '会話',
      }}
      onNavigate={(url) => {
        console.log('ナビゲート:', url);
      }}
      placeholders={{
        commentInput: 'メッセージを入力...',
      }}>
      <ChatConversation.Heading />
      <ChatConversation.Body />
    </ChatConversation>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントプロパティ​

プロパティ型デフォルト説明
onMessageSubmit(text: string) => voidundefinedメッセージ送信時のコールバック
onInputChange(text: string) => voidundefinedコメント入力変更時のコールバック
commentInput{isDisabled?: boolean; errorText?: string;}undefined下部のコメント入力の設定
commentSubmitButton{isDisabled?: boolean;}undefinedコメント送信ボタンの設定
chatViewChatViewConfig必須チャットパネルの設定
messagesMessage[]必須チャットビューに表示するメッセージの配列
labelsLabelsConfig必須ラベルテキストの設定
onNavigate(url: string) => void必須ナビゲーションコールバック（hrefに必要）
placeholders{commentInput: string}必須プレースホルダーテキストの設定
classNamestringundefinedスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

サブコンポーネント​

ChatConversationコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ChatConversation.Heading​

プロパティ型デフォルト説明
labelsLabelsConfigコンテキスト値ラベル設定（コンテキストをオーバーライド）
chatViewChatViewConfigコンテキスト値チャットビュー設定（コンテキストをオーバーライド）
onNavigate(url: string) => voidコンテキスト値ナビゲーションコールバック（コンテキストをオーバーライド）
classNamestringundefinedスタイリング用の追加CSSクラス名
childrenReactNodeデフォルトヘッダーコンテンツデフォルトヘッダーをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

ChatConversation.Body​

プロパティ型デフォルト説明
onMessageSubmit(text: string) => voidコンテキスト値メッセージ送信コールバック（コンテキストをオーバーライド）
onInputChange(text: string) => voidコンテキスト値入力変更コールバック（コンテキストをオーバーライド）
commentInput{isDisabled?: boolean; errorText?: string;}コンテキスト値コメント入力設定（コンテキストをオーバーライド）
commentSubmitButton{isDisabled?: boolean;}コンテキスト値送信ボタン設定（コンテキストをオーバーライド）
chatViewChatViewConfigコンテキスト値チャットビュー設定（コンテキストをオーバーライド）
messagesMessage[]コンテキスト値メッセージ配列（コンテキストをオーバーライド）
onNavigate(url: string) => voidコンテキスト値ナビゲーションコールバック（コンテキストをオーバーライド）
placeholders{commentInput: string}コンテキスト値プレースホルダー設定（コンテキストをオーバーライド）
classNamestringundefinedスタイリング用の追加CSSクラス名
size"normal" | "large""normal"チャットビューのサイズバリアント

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート：

import {ChatConversation} from '@nodeblocks/frontend-chat-conversation-block';
import {AvatarProps} from '@basaldev/blocks-frontend-framework';
import {useState} from 'react';

interface LabelsConfig {
  chatViewHeadingButtonText?: string;
  chatViewHeadingText?: string;
}

interface ChatViewConfig {
  heading?: {
    avatar?: AvatarProps;
    buttonHref: string;
  };
  isLoading?: boolean;
  onScrollTop?: (earliestMessageId: string) => void;
}

// メッセージインターフェース
interface Message {
  avatarColor?: AvatarProps['avatarColor'];
  avatarHref?: AvatarProps['href'];
  avatarUrl?: AvatarProps['avatarUrl'];
  content: string;
  createdAt: string;
  id: string;
  isOwnMessage?: boolean;
  title?: string;
}

// 完全なチャット会話設定
function AdvancedChatConversation() {
  const [messages, setMessages] = useState<Message[]>([
    {
      title: 'サポートエージェント',
      content: 'こんにちは！今日はどのようなお手伝いができますか？',
      id: 'msg-001',
      createdAt: '2025-02-01T09:00:00Z',
      isOwnMessage: false,
      avatarColor: '1',
    },
    {
      title: 'あなた',
      content: 'アカウント設定についてサポートが必要です。',
      id: 'msg-002',
      createdAt: '2025-02-01T09:01:00Z',
      isOwnMessage: true,
    },
  ]);

  const [inputValue, setInputValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [inputError, setInputError] = useState<string | undefined>();

  const handleInputChange = (text: string) => {
    setInputValue(text);
    
    // カスタム検証
    if (text.length > 500) {
      setInputError('メッセージが長すぎます（最大500文字）');
    } else {
      setInputError(undefined);
    }
  };

  const handleMessageSubmit = async (text: string) => {
    if (!text.trim()) return;

    setIsSubmitting(true);
    
    // ユーザーメッセージを追加
    const userMessage: Message = {
      title: 'あなた',
      content: text,
      id: `msg-${Date.now()}`,
      createdAt: new Date().toISOString(),
      isOwnMessage: true,
    };

    setMessages(prev => [...prev, userMessage]);
    setInputValue('');

    // API呼び出しをシミュレート
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // 応答メッセージを追加
      const responseMessage: Message = {
        title: 'サポートエージェント',
        content: 'メッセージありがとうございます。それについてお手伝いさせていただきます。',
        id: `msg-${Date.now()}-response`,
        createdAt: new Date().toISOString(),
        isOwnMessage: false,
        avatarColor: '1',
      };

      setMessages(prev => [...prev, responseMessage]);
    } catch (error) {
      console.error('メッセージ送信に失敗しました:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleScrollTop = (earliestMessageId: string) => {
    console.log('以前のメッセージを読み込み:', earliestMessageId);
    // ここでページネーションロジックを実装
  };

  return (
    <ChatConversation
      chatView={{
        heading: {
          avatar: {
            avatarColor: '2',
            avatarSize: 'large',
            avatarUrl: '/path/to/avatar.jpg',
          },
          buttonHref: '/support/dashboard',
        },
        isLoading: isSubmitting,
        onScrollTop: handleScrollTop,
      }}
      onInputChange={handleInputChange}
      onMessageSubmit={handleMessageSubmit}
      commentInput={{
        isDisabled: isSubmitting,
        errorText: inputError,
      }}
      commentSubmitButton={{
        isDisabled: isSubmitting || Boolean(inputError) || !inputValue.trim(),
      }}
      messages={messages}
      labels={{
        chatViewHeadingButtonText: 'ダッシュボードに戻る',
        chatViewHeadingText: 'カスタマーサポート',
      }}
      onNavigate={(url) => {
        // ナビゲーションを処理
        window.location.href = url;
      }}
      placeholders={{
        commentInput: 'ここにメッセージを入力...',
      }}
      className="custom-chat-container"
      style={{ maxHeight: '600px' }}>
      <ChatConversation.Heading className="custom-chat-header" />
      <ChatConversation.Body 
        className="custom-chat-body"
        size="large"
      />
    </ChatConversation>
  );
}

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。