import {
  Message,
  MessageContent,
} from "@code/ui/components/ai-elements/message";
import {
  MobileChatBubble,
  MobileChatMessage,
} from "@code/ui/components/mobile-chat";

import { AssistantIdentity } from "./assistant-identity";

export const ChatThinkingResponse = () => (
  <Message className="max-w-full gap-0" from="assistant">
    <MessageContent className="w-full max-w-none gap-0 overflow-visible p-0">
      <MobileChatMessage className="chat-message" sender="assistant">
        <div className="w-full min-w-0">
          <AssistantIdentity state="thinking" />
          <MobileChatBubble sender="assistant">
            <div className="thinking-line" aria-label="Zopu is thinking">
              <span />
              <span />
              <span />
            </div>
          </MobileChatBubble>
        </div>
      </MobileChatMessage>
    </MessageContent>
  </Message>
);
