ArtifactuseAgentMessage

import { ArtifactuseAgentMessage } from 'artifactuse/vue2'

import { ArtifactuseAgentMessage } from 'artifactuse/react'

import { ArtifactuseAgentMessage } from 'artifactuse/svelte'

<ArtifactuseAgentMessage 
  content={message.content}
  messageId={message.id}
  typing={isStreaming}
  isLastMessage={isLastMessage}
  onArtifactDetected={onDetected}
  onArtifactOpen={onOpen}
  onFormSubmit={onFormSubmit}
  onFormCancel={onFormCancel}
  onFormButtonClick={onFormButtonClick}
  onSocialCopy={onSocialCopy}
  onMediaOpen={onMediaOpen}
/>

<ArtifactuseAgentMessage 
  content={message.content}
  messageId={message.id}
  typing={isStreaming}
  isLastMessage={isLastMessage}
  on:artifact-detected={onDetected}
  on:artifact-open={onOpen}
  on:form-submit={onFormSubmit}
  on:form-cancel={onFormCancel}
  on:form-button-click={onFormButtonClick}
  on:social-copy={onSocialCopy}
  on:media-open={onMediaOpen}
/>

import { useState } from 'react'
import { ArtifactuseAgentMessage } from 'artifactuse/react'

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

  const handleFormSubmit = ({ formId, values }) => {
    // Send form data back to AI
    sendToAI(`User submitted form: ${JSON.stringify(values)}`)
  }

  const handleFormCancel = ({ formId }) => {
    // User cancelled the form
    console.log('Form cancelled:', formId)
  }

  const handleFormButtonClick = ({ formId, action, buttonName, values }) => {
    // Handle custom button actions
    console.log('Button clicked:', buttonName, action)
  }

  const handleSocialCopy = ({ platform, text }) => {
    // Track analytics
    analytics.track('social_copy', { platform })
  }

  const handleMediaOpen = ({ type, src }) => {
    // Track media views
    analytics.track('media_view', { type, src })
  }

  return (
    <div className="chat">
      {messages.map((msg, index) => (
        <ArtifactuseAgentMessage 
          key={msg.id}
          content={msg.content}
          messageId={msg.id}
          typing={msg.isStreaming}
          isLastMessage={index === messages.length - 1}
          onFormSubmit={handleFormSubmit}
          onFormCancel={handleFormCancel}
          onFormButtonClick={handleFormButtonClick}
          onSocialCopy={handleSocialCopy}
          onMediaOpen={handleMediaOpen}
        />
      ))}
    </div>
  )
}