Function ChatClient

apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx:89–461

({ identifier }: { identifier: string })

}

export default function ChatClient({ identifier }: { identifier: string }) {
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [inputValue, setInputValue] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const messagesContainerRef = useRef<HTMLDivElement>(null)
  const [conversationId] = useState(() => generateId())

  const [showScrollButton, setShowScrollButton] = useState(false)
  const [userHasScrolled, setUserHasScrolled] = useState(false)
  const isUserScrollingRef = useRef(false)

  const [isVoiceFirstMode, setIsVoiceFirstMode] = useState(false)

  const { data: chatConfigResult, error: chatConfigError } = useDeployedChatConfig(identifier)
  const { data: voiceSettings } = useVoiceSettings()
  const { data: starCount } = useGitHubStars()

  const sttAvailable = voiceSettings?.sttAvailable === true
  const authRequired = chatConfigResult?.kind === 'auth' ? chatConfigResult.authType : null
  const chatConfig = chatConfigResult?.kind === 'config' ? chatConfigResult.config : null

  const welcomeMessage = chatConfig?.customizations?.welcomeMessage
  const welcomeChatMessage = useMemo<ChatMessage | null>(
    () =>
      welcomeMessage
        ? {
            id: 'welcome',
            content: welcomeMessage,
            type: 'assistant',
            timestamp: new Date(),
            isInitialMessage: true,
          }
        : null,
    [welcomeMessage]
  )
  const displayMessages: ChatMessage[] = welcomeChatMessage
    ? [welcomeChatMessage, ...messages]
    : messages

  const { isStreamingResponse, abortControllerRef, stopStreaming, handleStreamedResponse } =
    useChatStreaming()
  const audioContextRef = useRef<AudioContext | null>(null)
  const { isPlayingAudio, streamTextToAudio, stopAudio } = useAudioStreaming(audioContextRef)

  const scrollToBottom = useCallback(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
    }
  }, [])

  const scrollToMessage = useCallback(
    (messageId: string, scrollToShowOnlyMessage = false) => {
      const messageElement = document.querySelector(`[data-message-id="${messageId}"]`)
      if (messageElement && messagesContainerRef.current) {
        const container = messagesContainerRef.current
        const containerRect = container.getBoundingClientRect()
        const messageRect = messageElement.getBoundingClientRect()