Chat

Preview

import {
  Chat,
  useChatSelection,
  MessageFeedScrollAnchor,
} from "@tilt-legal/cubitt-components/composites";
import { useLiveQuery } from "@tanstack/react-db";

function MyFloatingChat({ messagesCollection, chunksCollection, onModeChange }) {
  const { conversationId, handleNew, handleSelect } = useChatSelection();

  const { data: messages = [] } = useLiveQuery((q) =>
    q
      .from({ m: messagesCollection })
      .where(({ m }) => m.conversationId === conversationId)
      .orderBy(({ m }) => m.createdAt, "asc")
      .select(({ m }) => m),
  );

  const isStreaming = messages.some((msg) => msg.status === "running");

  return (
    <Chat.Floating
      conversationId={conversationId}
      hasMessages={messages.length > 0}
      isStreaming={isStreaming}
      onCancelStreaming={() => {
        /* cancel your stream */
      }}
      onNewConversation={handleNew}
      onSend={(payload) => {
        /* write to DB, start stream */
      }}
    >
      <Chat.Floating.Shell>
        <Chat.Floating.Header
          conversations={history}
          onConversationSelect={handleSelect}
          onNewConversation={handleNew}
          onModeChange={onModeChange}
        />
        <Chat.Floating.Content>
          <Chat.MessageList>
            {messages.map((msg) => (
              <MessageRow
                key={msg.id}
                messageId={msg.id}
                chunksCollection={chunksCollection}
              />
            ))}
          </Chat.MessageList>
          <MessageFeedScrollAnchor />
        </Chat.Floating.Content>
        <Chat.Floating.Footer
          files={{ available: myFiles }}
          instructions={{ available: myInstructions }}
        />
      </Chat.Floating.Shell>
    </Chat.Floating>
  );
}