Chat AI

import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationScrollButton,
  ConversationDownload,
  Message,
  MessageContent,
  MessageResponse,
  MessageToolbar,
  MessageAction,
  MessageBranch,
  PromptInput,
  PromptInputProvider,
  PromptInputActionMenu,
  PromptInputActionMenuContent,
  PromptInputActionMenuTrigger,
  usePromptInputAttachments,
  Attachments,
  Attachment,
  AttachmentPreview,
  AttachmentRemove,
} from '@/components/ui/chat-ai';

import {
  Conversation,
  ConversationContent,
  Message,
  MessageContent,
  MessageResponse,
  PromptInput,
  PromptInputProvider,
} from '@/components/ui/chat-ai';

function Chat() {
  const [messages, setMessages] = useState([]);

  const handleSubmit = ({ text, files }) => {
    // Handle message submission
    setMessages([...messages, { role: 'user', content: text }]);
  };

  return (
    <Conversation>
      <ConversationContent messages={messages} />
      <PromptInputProvider>
        <PromptInput onSubmit={handleSubmit} />
      </PromptInputProvider>
    </Conversation>
  );
}

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { fetch as expoFetch } from 'expo/fetch';

function AIChat() {
  const { messages, sendMessage } = useChat({
    transport: new DefaultChatTransport({
      fetch: expoFetch,
      api: 'http://localhost:8082/api/chat',
    }),
  });

  const handleSubmit = (message) => {
    sendMessage({
      text: message.text,
      files: message.files,
    });
  };

  return (
    <Conversation>
      <ConversationContent messages={messages} />
      <PromptInputProvider>
        <PromptInput onSubmit={handleSubmit} />
      </PromptInputProvider>
    </Conversation>
  );
}