From aaf5c15ca78fd55b674f9f210db55db1a03318e4 Mon Sep 17 00:00:00 2001
From: baokimho <kim.ho@edu.turkuamk.fi>
Date: Sun, 13 Sep 2026 03:04:21 +0300
Subject: [PATCH 1/2] fix(webchat): keep embedding origin stable across
 rerenders

---
 .../webchat-message-input-origin.test.tsx     | 176 ++++++++++++++++++
 .../webchat-message-input.tsx                 |  23 ++-
 2 files changed, 195 insertions(+), 4 deletions(-)
 create mode 100644 apps/builder/__tests__/webchat-message-input-origin.test.tsx

diff --git a/apps/builder/__tests__/webchat-message-input-origin.test.tsx b/apps/builder/__tests__/webchat-message-input-origin.test.tsx
new file mode 100644
index 0000000000..ebb50e9961
--- /dev/null
+++ b/apps/builder/__tests__/webchat-message-input-origin.test.tsx
@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+
+import { act, type ReactNode } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
+
+const mocks = vi.hoisted(() => ({
+  submittedInputs: [] as Array<Record<string, unknown>>,
+  actionOptions: null as {
+    onExecute: (args: { input: Record<string, unknown> }) => void
+    onSuccess: (args: { data: null }) => void
+  } | null,
+  defaultValues: null as Record<string, unknown> | null,
+  submit: null as (() => Promise<void>) | null,
+  clientEmbeddingOrigin: "https://www.example.com" as string | null,
+}))
+
+vi.mock("@/features/messages/actions/create-webchat-message.action", () => ({
+  createWebchatMessageAction: {},
+}))
+
+vi.mock("@next-safe-action/adapter-react-hook-form/hooks", () => ({
+  useHookFormAction: vi.fn((_action, _resolver, options) => {
+    mocks.actionOptions = options.actionProps
+    mocks.defaultValues = options.formProps.defaultValues
+
+    const form = {
+      control: {},
+      formState: { isValid: true, isSubmitting: false },
+      setValue: vi.fn(),
+      reset: vi.fn(),
+    }
+
+    const submit = async () => {
+      const input = {
+        ...mocks.defaultValues,
+        text: "hello",
+      }
+      mocks.submittedInputs.push(input)
+      mocks.actionOptions?.onExecute({ input })
+      mocks.actionOptions?.onSuccess({ data: null })
+    }
+    mocks.submit = submit
+
+    return {
+      form,
+      handleSubmitWithAction: submit,
+      resetFormAndAction: vi.fn(),
+    }
+  }),
+}))
+
+vi.mock("@/features/integration-webchat/lib/authorized-domain", () => ({
+  getClientEmbeddingOrigin: () => mocks.clientEmbeddingOrigin,
+}))
+
+vi.mock(
+  "@/features/integration-webchat/providers/store/guest-session-provider",
+  () => ({
+    useGuestSessionStore: (
+      selector: (state: Record<string, unknown>) => unknown,
+    ) =>
+      selector({
+        appendMessage: vi.fn(),
+        guestConversationId: "guest-1",
+        sendMessage: vi.fn(),
+      }),
+  }),
+)
+
+vi.mock("@chatbotx.io/ui/components/ui/form", () => ({
+  Form: ({ children }: { children: ReactNode }) => children,
+}))
+
+vi.mock("@chatbotx.io/ui/components/ui/textarea", () => ({
+  Textarea: (props: Record<string, unknown>) => <textarea {...props} />,
+}))
+
+vi.mock("@chatbotx.io/ui/components/ui/button", () => ({
+  Button: ({ children, ...props }: Record<string, unknown>) => (
+    <button {...props}>{children as ReactNode}</button>
+  ),
+}))
+
+vi.mock("react-hook-form", () => ({
+  Controller: ({
+    render,
+  }: {
+    render: (args: { field: Record<string, unknown> }) => ReactNode
+  }) =>
+    render({ field: { value: "", onChange: vi.fn() } }),
+  useWatch: ({ name }: { name: string }) => (name === "files" ? [] : ""),
+}))
+
+vi.mock("../src/features/messages/components/emoji-picker", () => ({
+  default: () => null,
+}))
+
+vi.mock("../src/features/messages/components/file-upload", () => ({
+  FileUploadPreview: () => null,
+}))
+
+vi.mock(
+  "../src/features/integration-webchat/components/webchat-message-menu",
+  () => ({
+    default: () => null,
+  }),
+)
+
+vi.mock("../src/features/integration-webchat/browser-profile-fields", () => ({
+  getWebchatProfileFields: () => ({}),
+}))
+
+import { WebchatMessageInput } from "../src/features/integration-webchat/webchat-message-input"
+
+describe("WebchatMessageInput embedding origin", () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    mocks.submittedInputs = []
+    mocks.actionOptions = null
+    mocks.defaultValues = null
+    mocks.submit = null
+    mocks.clientEmbeddingOrigin = "https://www.example.com"
+    container = document.createElement("div")
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  test("keeps parent origin across prop changes and form reset", async () => {
+    const props = {
+      workspaceId: "workspace-1",
+      webchatId: "webchat-1",
+      accessToken: "token",
+      parentOrigin: "https://www.example.com",
+    }
+
+    await act(async () => {
+      root.render(<WebchatMessageInput {...props} />)
+    })
+
+    await act(async () => {
+      root.render(
+        <WebchatMessageInput
+          {...props}
+          parentOrigin="https://chat.example.com/webchat?..."
+        />,
+      )
+    })
+
+    await act(async () => {
+      // First submit uses client-resolved origin despite changed server prop.
+      await mocks.submit?.()
+    })
+
+    // onSuccess above invokes reset(defaultValues); submit again to cover reset lifecycle.
+    await act(async () => {
+      await mocks.submit?.()
+    })
+
+    expect(mocks.submittedInputs).toHaveLength(2)
+    expect(mocks.submittedInputs.map((input) => input.parentOrigin)).toEqual([
+      "https://www.example.com",
+      "https://www.example.com",
+    ])
+    expect(mocks.submittedInputs).not.toContainEqual(
+      expect.objectContaining({ parentOrigin: "https://chat.example.com" }),
+    )
+  })
+})
diff --git a/apps/builder/src/features/integration-webchat/webchat-message-input.tsx b/apps/builder/src/features/integration-webchat/webchat-message-input.tsx
index d927afccb4..083e75c42e 100644
--- a/apps/builder/src/features/integration-webchat/webchat-message-input.tsx
+++ b/apps/builder/src/features/integration-webchat/webchat-message-input.tsx
@@ -7,7 +7,13 @@ import { createId } from "@chatbotx.io/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks"
 import { PaperclipIcon, SendHorizonalIcon } from "lucide-react"
-import { type KeyboardEvent, useEffect, useMemo, useRef } from "react"
+import {
+  type KeyboardEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import { Controller, useWatch } from "react-hook-form"
 import { createWebchatMessageAction } from "../messages/actions/create-webchat-message.action"
 import EmojiPicker from "../messages/components/emoji-picker"
@@ -15,6 +21,7 @@ import { FileUploadPreview } from "../messages/components/file-upload"
 import { createWebchatMessageRequest } from "../messages/schema/mutation"
 import { getWebchatProfileFields } from "./browser-profile-fields"
 import WebchatMessageMenu from "./components/webchat-message-menu"
+import { getClientEmbeddingOrigin } from "./lib/authorized-domain"
 import { useGuestSessionStore } from "./providers/store/guest-session-provider"
 
 type WebchatMessageInputProps = {
@@ -33,9 +40,17 @@ export const WebchatMessageInput = (props: WebchatMessageInputProps) => {
     parentOrigin,
     accessToken,
   } = props
+  const [embeddingOrigin, setEmbeddingOrigin] = useState(parentOrigin)
   const { sendMessage, guestConversationId, appendMessage } =
     useGuestSessionStore((state) => state)
 
+  useEffect(() => {
+    const clientEmbeddingOrigin = getClientEmbeddingOrigin()
+    if (clientEmbeddingOrigin) {
+      setEmbeddingOrigin(clientEmbeddingOrigin)
+    }
+  }, [])
+
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const defaultValues = useMemo(
     () => ({
@@ -47,14 +62,14 @@ export const WebchatMessageInput = (props: WebchatMessageInputProps) => {
       ref: referral,
       ...getWebchatProfileFields(),
       accessToken: accessToken ?? undefined,
-      parentOrigin: parentOrigin ?? undefined,
+      parentOrigin: embeddingOrigin ?? undefined,
     }),
     [
       workspaceId,
       webchatId,
       guestConversationId,
       referral,
-      parentOrigin,
+      embeddingOrigin,
       accessToken,
     ],
   )
@@ -186,7 +201,7 @@ export const WebchatMessageInput = (props: WebchatMessageInputProps) => {
             <div className="flex-1">
               <WebchatMessageMenu
                 accessToken={accessToken}
-                parentOrigin={parentOrigin}
+                parentOrigin={embeddingOrigin}
                 webchatId={webchatId}
                 workspaceId={workspaceId}
               />

From 07cd9b3c397c739232607462b833f5d1df964e33 Mon Sep 17 00:00:00 2001
From: baokimho <kim.ho@edu.turkuamk.fi>
Date: Sun, 13 Sep 2026 12:58:27 +0300
Subject: [PATCH 2/2] fix(webchat): keep origin aligned with access token

---
 .../webchat-message-input-origin.test.tsx     | 138 +++++-------------
 .../webchat-message-input.tsx                 |   4 +
 2 files changed, 37 insertions(+), 105 deletions(-)

diff --git a/apps/builder/__tests__/webchat-message-input-origin.test.tsx b/apps/builder/__tests__/webchat-message-input-origin.test.tsx
index ebb50e9961..c532bcd701 100644
--- a/apps/builder/__tests__/webchat-message-input-origin.test.tsx
+++ b/apps/builder/__tests__/webchat-message-input-origin.test.tsx
@@ -10,7 +10,7 @@ const mocks = vi.hoisted(() => ({
     onExecute: (args: { input: Record<string, unknown> }) => void
     onSuccess: (args: { data: null }) => void
   } | null,
-  defaultValues: null as Record<string, unknown> | null,
+  currentFormValues: null as Record<string, unknown> | null,
   submit: null as (() => Promise<void>) | null,
   clientEmbeddingOrigin: "https://www.example.com" as string | null,
 }))
@@ -22,94 +22,49 @@ vi.mock("@/features/messages/actions/create-webchat-message.action", () => ({
 vi.mock("@next-safe-action/adapter-react-hook-form/hooks", () => ({
   useHookFormAction: vi.fn((_action, _resolver, options) => {
     mocks.actionOptions = options.actionProps
-    mocks.defaultValues = options.formProps.defaultValues
+    if (!mocks.currentFormValues) {
+      mocks.currentFormValues = { ...options.formProps.defaultValues }
+    }
 
     const form = {
       control: {},
       formState: { isValid: true, isSubmitting: false },
       setValue: vi.fn(),
-      reset: vi.fn(),
+      reset: vi.fn((values: Record<string, unknown>) => {
+        mocks.currentFormValues = { ...values }
+      }),
     }
 
     const submit = async () => {
-      const input = {
-        ...mocks.defaultValues,
-        text: "hello",
-      }
+      const input = { ...mocks.currentFormValues, text: "hello" }
       mocks.submittedInputs.push(input)
       mocks.actionOptions?.onExecute({ input })
       mocks.actionOptions?.onSuccess({ data: null })
     }
     mocks.submit = submit
 
-    return {
-      form,
-      handleSubmitWithAction: submit,
-      resetFormAndAction: vi.fn(),
-    }
+    return { form, handleSubmitWithAction: submit, resetFormAndAction: vi.fn() }
   }),
 }))
 
 vi.mock("@/features/integration-webchat/lib/authorized-domain", () => ({
   getClientEmbeddingOrigin: () => mocks.clientEmbeddingOrigin,
 }))
-
-vi.mock(
-  "@/features/integration-webchat/providers/store/guest-session-provider",
-  () => ({
-    useGuestSessionStore: (
-      selector: (state: Record<string, unknown>) => unknown,
-    ) =>
-      selector({
-        appendMessage: vi.fn(),
-        guestConversationId: "guest-1",
-        sendMessage: vi.fn(),
-      }),
-  }),
-)
-
-vi.mock("@chatbotx.io/ui/components/ui/form", () => ({
-  Form: ({ children }: { children: ReactNode }) => children,
-}))
-
-vi.mock("@chatbotx.io/ui/components/ui/textarea", () => ({
-  Textarea: (props: Record<string, unknown>) => <textarea {...props} />,
-}))
-
-vi.mock("@chatbotx.io/ui/components/ui/button", () => ({
-  Button: ({ children, ...props }: Record<string, unknown>) => (
-    <button {...props}>{children as ReactNode}</button>
-  ),
+vi.mock("@/features/integration-webchat/providers/store/guest-session-provider", () => ({
+  useGuestSessionStore: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({ appendMessage: vi.fn(), guestConversationId: "guest-1", sendMessage: vi.fn() }),
 }))
-
+vi.mock("@chatbotx.io/ui/components/ui/form", () => ({ Form: ({ children }: { children: ReactNode }) => children }))
+vi.mock("@chatbotx.io/ui/components/ui/textarea", () => ({ Textarea: (props: Record<string, unknown>) => <textarea {...props} /> }))
+vi.mock("@chatbotx.io/ui/components/ui/button", () => ({ Button: ({ children, ...props }: Record<string, unknown>) => <button {...props}>{children as ReactNode}</button> }))
 vi.mock("react-hook-form", () => ({
-  Controller: ({
-    render,
-  }: {
-    render: (args: { field: Record<string, unknown> }) => ReactNode
-  }) =>
-    render({ field: { value: "", onChange: vi.fn() } }),
+  Controller: ({ render }: { render: (args: { field: Record<string, unknown> }) => ReactNode }) => render({ field: { value: "", onChange: vi.fn() } }),
   useWatch: ({ name }: { name: string }) => (name === "files" ? [] : ""),
 }))
-
-vi.mock("../src/features/messages/components/emoji-picker", () => ({
-  default: () => null,
-}))
-
-vi.mock("../src/features/messages/components/file-upload", () => ({
-  FileUploadPreview: () => null,
-}))
-
-vi.mock(
-  "../src/features/integration-webchat/components/webchat-message-menu",
-  () => ({
-    default: () => null,
-  }),
-)
-
-vi.mock("../src/features/integration-webchat/browser-profile-fields", () => ({
-  getWebchatProfileFields: () => ({}),
-}))
+vi.mock("../src/features/messages/components/emoji-picker", () => ({ default: () => null }))
+vi.mock("../src/features/messages/components/file-upload", () => ({ FileUploadPreview: () => null }))
+vi.mock("../src/features/integration-webchat/components/webchat-message-menu", () => ({ default: () => null }))
+vi.mock("../src/features/integration-webchat/browser-profile-fields", () => ({ getWebchatProfileFields: () => ({}) }))
 
 import { WebchatMessageInput } from "../src/features/integration-webchat/webchat-message-input"
 
@@ -120,57 +75,30 @@ describe("WebchatMessageInput embedding origin", () => {
   beforeEach(() => {
     mocks.submittedInputs = []
     mocks.actionOptions = null
-    mocks.defaultValues = null
+    mocks.currentFormValues = null
     mocks.submit = null
     mocks.clientEmbeddingOrigin = "https://www.example.com"
     container = document.createElement("div")
     document.body.appendChild(container)
     root = createRoot(container)
   })
-
   afterEach(() => {
     act(() => root.unmount())
     container.remove()
   })
 
-  test("keeps parent origin across prop changes and form reset", async () => {
-    const props = {
-      workspaceId: "workspace-1",
-      webchatId: "webchat-1",
-      accessToken: "token",
-      parentOrigin: "https://www.example.com",
-    }
-
-    await act(async () => {
-      root.render(<WebchatMessageInput {...props} />)
-    })
-
-    await act(async () => {
-      root.render(
-        <WebchatMessageInput
-          {...props}
-          parentOrigin="https://chat.example.com/webchat?..."
-        />,
-      )
-    })
-
-    await act(async () => {
-      // First submit uses client-resolved origin despite changed server prop.
-      await mocks.submit?.()
-    })
-
-    // onSuccess above invokes reset(defaultValues); submit again to cover reset lifecycle.
-    await act(async () => {
-      await mocks.submit?.()
-    })
+  test("keeps normal origin stable across prop changes and reset", async () => {
+    const props = { workspaceId: "workspace-1", webchatId: "webchat-1", accessToken: "token", parentOrigin: "https://www.example.com" }
+    await act(async () => root.render(<WebchatMessageInput {...props} />))
+    await act(async () => root.render(<WebchatMessageInput {...props} parentOrigin="https://chat.example.com/webchat?..." />))
+    await act(async () => mocks.submit?.())
+    await act(async () => mocks.submit?.())
+    expect(mocks.submittedInputs.map((input) => input.parentOrigin)).toEqual(["https://www.example.com", "https://www.example.com"])
+  })
 
-    expect(mocks.submittedInputs).toHaveLength(2)
-    expect(mocks.submittedInputs.map((input) => input.parentOrigin)).toEqual([
-      "https://www.example.com",
-      "https://www.example.com",
-    ])
-    expect(mocks.submittedInputs).not.toContainEqual(
-      expect.objectContaining({ parentOrigin: "https://chat.example.com" }),
-    )
+  test("keeps null origin when client resolver returns an origin", async () => {
+    await act(async () => root.render(<WebchatMessageInput workspaceId="workspace-1" webchatId="webchat-1" parentOrigin={null} />))
+    await act(async () => mocks.submit?.())
+    expect(mocks.submittedInputs[0]?.parentOrigin).toBeUndefined()
   })
 })
diff --git a/apps/builder/src/features/integration-webchat/webchat-message-input.tsx b/apps/builder/src/features/integration-webchat/webchat-message-input.tsx
index 083e75c42e..bc9bd814a6 100644
--- a/apps/builder/src/features/integration-webchat/webchat-message-input.tsx
+++ b/apps/builder/src/features/integration-webchat/webchat-message-input.tsx
@@ -45,6 +45,10 @@ export const WebchatMessageInput = (props: WebchatMessageInputProps) => {
     useGuestSessionStore((state) => state)
 
   useEffect(() => {
+    if (!parentOrigin) {
+      return
+    }
+
     const clientEmbeddingOrigin = getClientEmbeddingOrigin()
     if (clientEmbeddingOrigin) {
       setEmbeddingOrigin(clientEmbeddingOrigin)