How do I add jwt access token in the headers via deep-chat?

[roberthobblebottom]

How do I add in access token in the headers via deep-chat? I am trying to put them into header but not really sure how to go about it.

the print(websocket.headers) doesn't return the Authorization: "test"

I apologies if this is a basic, beginner question

frontend vue

<template>
  <div>
    <deep-chat
      class="deepchat"
      :textInput="{ placeholder: { text: 'start typing here' } }"
      :history="history"
      :headers="headers"
      introMessage='{"text":"Hi I
    am HeyVenus chatbot"}'
      :connect="connect"
      :style="styles"
      messageStyles='{"default": {"shared": {"innerContainer": {"fontSize":
    "1rem"}}}}'
    >
      <div
        style="
          width: 200px;
          background-color: #f3f3f3;
          border-radius: 10px;
          padding: 12px;
          padding-bottom: 15px;
          display: none;
        "
      >
        <div>
          <div style="text-align: center; margin-bottom: 8px; font-size: 16px">
            <b>Hi I am Hey Venus Chatbot</b>
          </div>
        </div>
      </div>
    </deep-chat>
  </div>
</template>

<script setup lang="ts">
import { _myUrl } from "@/constants";
import router from "@/router";
import { onMounted, ref } from "vue";
import "deep-chat";
const history = ref([]);
const headers = ref({ Authorization: "test" });
const connect = ref({ url: _myUrl + "chat", websocket: true }); // eslint-disable-line no-unused-vars
const styles = {
  left: "290px",
  borderRadius: "10px",
  width: "80vw",
  height: "90vh ",
  paddingTop: "10px",
};

onMounted(async () => {
  try {
    const access_token: string = localStorage.getItem("access_token")!;
    const response = await fetch(
      _myUrl +
        "auth?" +
        new URLSearchParams({
          access_token: access_token,
        })
    );
    if (!response.ok) {
      throw new Error("server error: " + response.status);
    }
  } catch (error) {
    console.log(error);
    router.push({ path: "/login" });
  }
});
</script>

backend fastapi

@router.websocket('/chat')
async def chat(websocket: WebSocket ):
    # TODO AUTH CHECKING I don't know how to use deep-chat for auth
    await manager.connect(
        websocket
    )
   print(websocket.headers)
    try:
        while True:
            data = await websocket.receive_text()
            await manager.send_personal_message('{"text":"testing websockets"}', websocket)
    except WebSocketDisconnect:
        manager.disconnect(websocket)
        await manager.send_personal_message(
            '{"text":"you have disconnected"}',websocket

        )