JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
  
  const userLang = navigator.language || navigator.userLanguage; 
    const userReferrer = document.referrer || "direct";
    const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const sid = localStorage.getItem('czmSession') || crypto.randomUUID();
    localStorage.setItem('czmSession', sid);
    console.log(sid);
    const myMetadata = {
      language: userLang,
      referrer: userReferrer,
      timezone: userTimeZone,
      sessionId: sid,
      n8nchatui: { sessionKey: sid }
    }
	createChat({
      webhookUrl: 'https://ui.czm.ai/webhook/bd08cb57-42ff-4417-8e15-04abd01a5703/chat',
      sessionId: sid,
      webhookConfig: {
        method: 'POST',
        headers: {}
      },
      target: '.chat-container',
      mode: 'fullscreen',
      chatInputKey: 'chatInput',
      chatSessionKey: 'sessionId',
      loadPreviousSession: true,
      metadata: myMetadata,
      showWelcomeScreen: false,
      defaultLanguage: 'en',
      allowFileUploads: false,
      allowedFilesMimeTypes: '',
      initialMessages: ['tried assigning chatSessionKey to metadata.sessionID (nope)','on the backend, selecting load *manually* provides no clear mechanism to define the manually entered id.','similarly, load from memory lacks the option as well. Additionally, the memory nodes use a fixed {{json.sessionID}} value','what appears to work is selecting *manual* on the node memory option, then immediately after the chat node, adding a set node that redefines json.sessionId with the value from metadata'],
      i18n: {
        en: {
          title: 'Chat node test.',
          subtitle: 'trying to pass sessionid. v1.110.1, chat node 1.3',
          footer: '',
          getStarted: 'New Conversation',
         ...