BarVisualizer doesn't render even after importing the component styles

[SirNiksALot]

Select which package(s) are affected

@livekit/components-react

Describe the bug

const Agent = () =>{

    const {token}=useUserRoomContext()
    const {audioTrack,state,agentTranscriptions}=useVoiceAssistant()
    const localParticipant = useLocalParticipant();
    const localParticipantTrackRef={
        publication: localParticipant.microphoneTrack,
        source: Track.Source.Microphone,
        participant: localParticipant.localParticipant,
      }
    const { segments: userTranscriptions } = useTrackTranscription(localParticipantTrackRef)



    return <div className="h-80">
      <BarVisualizer state={state} barCount={5} trackRef={audioTrack} style={{}} />
      <p className="text-center">{state}</p>
    </div>
    

}

This is the component I'm using inside the <LivekitRoom/> component and it doesn't render the BarVisualizer even after importing the component styles.

Reproduction

import { 
    useVoiceAssistant,
    BarVisualizer,
    VoiceAssistantControlBar,
    useTrackTranscription,
    useLocalParticipant } from "@livekit/components-react";
import  { useUserRoomContext } from "../contexts/UserContext"
import { Track } from "livekit-client";
import "@livekit/components-styles";


const Agent = () =>{

    const {token}=useUserRoomContext()
    const {audioTrack,state,agentTranscriptions}=useVoiceAssistant()
    const localParticipant = useLocalParticipant();
    const localParticipantTrackRef={
        publication: localParticipant.microphoneTrack,
        source: Track.Source.Microphone,
        participant: localParticipant.localParticipant,
      }
    const { segments: userTranscriptions } = useTrackTranscription(localParticipantTrackRef)



    return <div className="h-80">
      <BarVisualizer state={state} barCount={5} trackRef={audioTrack} style={{}} />
      <p className="text-center">{state}</p>
    </div>
    

}

Logs

System Info

Windows 11 , Brave 1.74.51

Severity

annoyance

Additional Information

No response

[lukasIO]

does it work with this example code: https://github.com/livekit/components-js/blob/main/examples/nextjs/pages/voice-assistant.tsx ?

[SirNiksALot]

@lukasIO this is the code im using and I did look at the examples and the docs , but i cant seem to figure out where im going wrong

const Agent = () =>{

    const {token}=useUserRoomContext()
    const {audioTrack,state,agentTranscriptions}=useVoiceAssistant()
    const localParticipant = useLocalParticipant();
    const localParticipantTrackRef={
        publication: localParticipant.microphoneTrack,
        source: Track.Source.Microphone,
        participant: localParticipant.localParticipant,
      }
    const { segments: userTranscriptions } = useTrackTranscription(localParticipantTrackRef)
    const [messages,setMessages]=useState([])
    useEffect(
      ()=>{
        const allMessages=[
          ...(agentTranscriptions?.map(t=>({type:"Agent", ...t})) ?? []),
          ...(userTranscriptions?.map(t=>({type:"User", ...t})) ?? [])
        ].sort((a, b) => a.firstReceivedTime - b.firstReceivedTime);
        setMessages(allMessages)
      }
    ,[agentTranscriptions,userTranscriptions])

    return <>
    <div className="bar-visualizer" style={{ border: '2px dashed black', padding: '10px' }}>
      <BarVisualizer
        state={state}
        barCount={7}
        trackRef={audioTrack}
      />
    </div>
    <div className="conversation">
    {
      messages.map((msg,index)=> {
        return <Message key={msg.id || index} type={msg.type} text={msg.text}/>
      })
    }
</div>
<p className="text-center">{state}</p>
</>

This component is the child of the Livekit room component :

<LiveKitRoom 
        token={token} 
        serverUrl="wss://ai-voice-assistant-2k36iko3.livekit.cloud" 
        connect={true}
        audio={true}
        video={false}
        onDisconnected={()=>{
            navigate("/interview_ended") }}>
        <Agent/>
        <RoomAudioRenderer/>
        <VoiceAssistantControlBar/>
    </LiveKitRoom>

[lukasIO]

I'd suggest to start with the example and change it step by step to implement your code and then you should be able to figure out what's going on. Can't spot anything that looks off with your code, but it's also hard to tell when just seeing snippets. It might also be due to a suspended audio context, put a StartAudioButton in your component tree to see if that fixes things

[SirNiksALot]

I'd suggest to start with the example and change it step by step to implement your code and then you should be able to figure out what's going on. Can't spot anything that looks off with your code, but it's also hard to tell when just seeing snippets. It might also be due to a suspended audio context, put a StartAudioButton in your component tree to see if that fixes things

@lukasIO ill try to add a start audio button and see if it works .

[lukasIO]

I'll close this as done, feel free to open a new issue if this continues to be a problem for you. You can also check out the new starter app at github.com/livekit-examples/agent-starter-react for refererence