@copilotkit/react-ui/dist/chunk-HIW7RXCD.mjs.map

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message } from \"@copilotkit/shared\";\nimport { useCopilotChatInternal } from \"@copilotkit/react-core\";\nimport { LegacyRenderMessage, LegacyRenderProps } from \"./messages/LegacyRenderMessage\";\n\nexport const Messages = ({\n  inProgress,\n  children,\n  RenderMessage,\n  AssistantMessage,\n  UserMessage,\n  ErrorMessage,\n  ImageRenderer,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n  messageFeedback,\n  markdownTagRenderers,\n  chatError,\n\n  // Legacy props\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n  RenderImageMessage,\n}: MessagesProps) => {\n  const { labels, icons } = useChatContext();\n  const { messages: visibleMessages, interrupt } = useCopilotChatInternal();\n  const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);\n  const messages = [...initialMessages, ...visibleMessages];\n  const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);\n\n  // Check if any legacy props are provided\n  const hasLegacyProps = !!(\n    RenderTextMessage ||\n    RenderActionExecutionMessage ||\n    RenderAgentStateMessage ||\n    RenderResultMessage ||\n    RenderImageMessage\n  );\n\n  // Show deprecation warning if legacy props are used\n  useEffect(() => {\n    if (hasLegacyProps) {\n      console.warn(\n        \"[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. \" +\n          \"Please use the unified 'RenderMessage' prop instead. \" +\n          \"See migration guide: https://docs.copilotkit.ai/migration/render-message\",\n      );\n    }\n  }, [hasLegacyProps]);\n\n  // Create legacy props object for the adapter\n  const legacyProps: LegacyRenderProps = useMemo(\n    () => ({\n      RenderTextMessage,\n      RenderActionExecutionMessage,\n      RenderAgentStateMessage,\n      RenderResultMessage,\n      RenderImageMessage,\n    }),\n    [\n      RenderTextMessage,\n      RenderActionExecutionMessage,\n      RenderAgentStateMessage,\n      RenderResultMessage,\n      RenderImageMessage,\n    ],\n  );\n\n  // Determine which render component to use\n  const MessageRenderer = hasLegacyProps\n    ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />\n    : RenderMessage;\n\n  const LoadingIcon = () => <span>{icons.activityIcon}</span>;\n\n  return (\n    <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n      <div className=\"copilotKitMessagesContainer\">\n        {messages.map((message, index) => {\n          const isCurrentMessage = index === messages.length - 1;\n          return (\n            <MessageRenderer\n              key={index}\n              message={message}\n              messages={messages}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n              AssistantMessage={AssistantMessage}\n              UserMessage={UserMessage}\n              ImageRenderer={ImageRenderer}\n              onRegenerate={onRegenerate}\n              onCopy={onCopy}\n              onThumbsUp={onThumbsUp}\n              onThumbsDown={onThumbsDown}\n              messageFeedback={messageFeedback}\n              markdownTagRenderers={markdownTagRenderers}\n            />\n          );\n        })}\n        {messages[messages.length - 1]?.role === \"user\" && inProgress && <LoadingIcon />}\n        {interrupt}\n        {chatError && ErrorMessage && <ErrorMessage error={chatError} isCurrentMessage />}\n      </div>\n      <footer className=\"copilotKitMessagesFooter\" ref={messagesEndRef}>\n        {children}\n      </footer>\n    </div>\n  );\n};\n\nfunction makeInitialMessages(initial: string | string[] | undefined): Message[] {\n  if (!initial) return [];\n\n  if (Array.isArray(initial)) {\n    return initial.map((message) => {\n      return {\n        id: message,\n        role: \"assistant\",\n        content: message,\n      };\n    });\n  }\n\n  return [\n    {\n      id: initial,\n      role: \"assistant\",\n      content: initial,\n    },\n  ];\n}\n\nexport function useScrollToBottom(messages: Message[]) {\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n  const isProgrammaticScrollRef = useRef(false);\n  const isUserScrollUpRef = useRef(false);\n\n  const scrollToBottom = () => {\n    if (messagesContainerRef.current && messagesEndRef.current) {\n      isProgrammaticScrollRef.current = true;\n      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;\n    }\n  };\n\n  const handleScroll = () => {\n    if (isProgrammaticScrollRef.current) {\n      isProgrammaticScrollRef.current = false;\n      return;\n    }\n\n    if (messagesContainerRef.current) {\n      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n    }\n  };\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (container) {\n      container.addEventListener(\"scroll\", handleScroll);\n    }\n    return () => {\n      if (container) {\n        container.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const mutationObserver = new MutationObserver(() => {\n      if (!isUserScrollUpRef.current) {\n        scrollToBottom();\n      }\n    });\n\n    mutationObserver.observe(container, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    isUserScrollUpRef.current = false;\n    scrollToBottom();\n  }, [messages.filter((m) => m.role === \"user\").length]);\n\n  return { messagesEndRef, messagesContainerRef };\n}\n"],"mappings":"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","names":[]}