fix(manage-assistant): refresh the question pool when the assistant creates a draft

The chat iframe caches the verified manage parent origin (zustand store,
set only after a context message passes validation) and posts a
klicker:manage-element-created message to that exact origin after a
successful proposal confirm. The widget validates the payload strictly
behind its existing origin+source checks, refetches GetUserElements, and
fires a success toast (new i18n key, en+de). Standalone chat tabs skip
the notify silently. Confirm double-submit was already guarded.

Author: rschlaefli

apps/chat/src/components/manage-proposal-card.tsx

@@ -2,6 +2,7 @@
 
 import { CheckIcon, LoaderCircleIcon } from 'lucide-react'
 import { useState, type FC } from 'react'
+import { notifyManageParent } from '../services/manageParentNotify'
 import { parseManageProposalPayload } from '../services/proposalToElementInstance'
 import { ManageProposalPreview } from './manage-proposal-preview'
 import { formatToolName } from './tool-labels'
@@ -115,6 +116,7 @@ export const ManageProposalCard: FC<ManageProposalCardProps> = ({
       }
 
       setConfirmation({ type: 'success', element: data.element })
+      notifyManageParent({ id: data.element.id, name: data.element.name })
     } catch (error) {
       setConfirmation({
         message:

apps/chat/src/hooks/useEmbeddedManageContext.ts

@@ -5,6 +5,7 @@ import {
   sanitizeManageAssistantContext,
   type ManageAssistantContext,
 } from '../services/manageContext'
+import { useManageParentStore } from '../stores/manageParentStore'
 import { useEmbedded } from './useEmbedded'
 
 const MANAGE_CONTEXT_MESSAGE_TYPE = 'klicker:manage-context'
@@ -15,11 +16,15 @@ export function useEmbeddedManageContext() {
   const embedded = useEmbedded()
   const [context, setContext] = useState<ManageAssistantContext | null>(null)
   const contextKeyRef = useRef<string | null>(null)
+  const setManageParentOrigin = useManageParentStore(
+    (state) => state.setManageParentOrigin
+  )
 
   useEffect(() => {
     if (!embedded) {
       contextKeyRef.current = null
       setContext(null)
+      setManageParentOrigin(null)
       return
     }
 
@@ -30,6 +35,11 @@ export function useEmbeddedManageContext() {
       const nextContext = sanitizeManageAssistantContext(event.data.payload)
       if (!nextContext) return
 
+      // The message passed every validation check above, so event.origin is
+      // the verified Manage parent origin. Cache it for components outside
+      // this hook (e.g. the proposal card) that need to postMessage back.
+      setManageParentOrigin(event.origin)
+
       const messageId =
         typeof event.data.messageId === 'number' ? event.data.messageId : null
 
@@ -65,7 +75,7 @@ export function useEmbeddedManageContext() {
     window.parent.postMessage({ type: MANAGE_CONTEXT_READY_MESSAGE_TYPE }, '*')
 
     return () => window.removeEventListener('message', handleMessage)
-  }, [embedded])
+  }, [embedded, setManageParentOrigin])
 
   return context
 }

apps/chat/src/services/manageParentNotify.ts

@@ -0,0 +1,35 @@
+import { useManageParentStore } from '../stores/manageParentStore'
+
+export const MANAGE_ELEMENT_CREATED_MESSAGE_TYPE =
+  'klicker:manage-element-created'
+
+export type ManageElementCreatedPayload = {
+  id: number
+  name: string
+}
+
+export function buildManageElementCreatedMessage(
+  payload: ManageElementCreatedPayload
+) {
+  return {
+    type: MANAGE_ELEMENT_CREATED_MESSAGE_TYPE,
+    payload,
+  } as const
+}
+
+// Tells the embedding Manage parent that a proposal was confirmed into a new
+// question-pool element, so it can refresh its own data without a reload.
+// Silently does nothing when there is no cached parent origin: that means
+// this chat instance is not embedded in a Manage tab (e.g. a standalone chat
+// session), so there is no parent to refresh. The cached origin always comes
+// from a validated `klicker:manage-context` message (see
+// useEmbeddedManageContext), so it is safe to target directly instead of '*'.
+export function notifyManageParent(payload: ManageElementCreatedPayload) {
+  const manageParentOrigin = useManageParentStore.getState().manageParentOrigin
+  if (!manageParentOrigin) return
+
+  window.parent.postMessage(
+    buildManageElementCreatedMessage(payload),
+    manageParentOrigin
+  )
+}

apps/chat/src/stores/manageParentStore.ts

@@ -0,0 +1,17 @@
+'use client'
+import { create } from 'zustand'
+
+// Caches the verified origin of the embedding Manage parent window once a
+// `klicker:manage-context` message from it has passed validation. Kept as a
+// standalone store (rather than folded into chatContextStore, which tracks
+// the unrelated PWA embed context) because the two embeddings have
+// independent lifecycles and message types.
+type ManageParentState = {
+  manageParentOrigin: string | null
+  setManageParentOrigin: (manageParentOrigin: string | null) => void
+}
+
+export const useManageParentStore = create<ManageParentState>((set) => ({
+  manageParentOrigin: null,
+  setManageParentOrigin: (manageParentOrigin) => set({ manageParentOrigin }),
+}))

apps/chat/test/manage-parent-notify.test.ts

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import {
+  buildManageElementCreatedMessage,
+  notifyManageParent,
+} from '../src/services/manageParentNotify'
+import { useManageParentStore } from '../src/stores/manageParentStore'
+
+afterEach(() => {
+  useManageParentStore.setState({ manageParentOrigin: null })
+})
+
+describe('Manage parent notify', () => {
+  test('builds a typed element-created message envelope', () => {
+    expect(
+      buildManageElementCreatedMessage({ id: 42, name: 'Draft question' })
+    ).toEqual({
+      type: 'klicker:manage-element-created',
+      payload: { id: 42, name: 'Draft question' },
+    })
+  })
+
+  test('does nothing when no manage parent origin is cached', () => {
+    useManageParentStore.setState({ manageParentOrigin: null })
+
+    // The vitest environment for this suite is `node`, so `window` is
+    // undefined. If notifyManageParent tried to reach window.parent it would
+    // throw a ReferenceError, so a non-throwing call here proves the guard
+    // short-circuits before touching the DOM - i.e. before a non-embedded
+    // chat session (no verified parent origin) ever posts a message.
+    expect(() =>
+      notifyManageParent({ id: 1, name: 'Draft question' })
+    ).not.toThrow()
+  })
+})

apps/frontend-manage/src/components/assistant/ManageAssistantWidget.tsx

@@ -1,9 +1,12 @@
+import { useApolloClient } from '@apollo/client'
 import {
   faArrowUpRightFromSquare,
   faWandMagicSparkles,
   faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GetUserElementsDocument } from '@klicker-uzh/graphql/dist/ops'
+import { toast } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -17,6 +20,10 @@ import {
   buildManageAssistantContext,
   type ManageAssistantContext,
 } from './manageAssistantContext'
+import {
+  isManageElementCreatedMessage,
+  sanitizeManageElementCreatedPayload,
+} from './manageElementCreatedMessage'
 
 const MANAGE_CONTEXT_MESSAGE_TYPE = 'klicker:manage-context'
 const MANAGE_CONTEXT_ACK_MESSAGE_TYPE = 'klicker:manage-context-ack'
@@ -25,6 +32,7 @@ const MANAGE_CONTEXT_READY_MESSAGE_TYPE = 'klicker:manage-context-ready'
 export function ManageAssistantWidget() {
   const t = useTranslations()
   const router = useRouter()
+  const apolloClient = useApolloClient()
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
   const triggerRef = useRef<HTMLButtonElement | null>(null)
   const shouldRestoreFocusRef = useRef(false)
@@ -133,12 +141,30 @@ export function ManageAssistantWidget() {
       // before a slow-hydrating iframe is able to receive anything.
       if (isManageContextReadyMessage(event.data)) {
         sendCurrentContext()
+        return
+      }
+
+      // A confirmed proposal created a new question-pool element. The
+      // payload crossed a postMessage boundary from the iframe, so treat it
+      // as untrusted data rather than an instruction: validate its shape
+      // before using it for anything, and never render it as HTML.
+      if (isManageElementCreatedMessage(event.data)) {
+        const element = sanitizeManageElementCreatedPayload(event.data.payload)
+        if (!element) return
+
+        apolloClient.refetchQueries({ include: [GetUserElementsDocument] })
+        toast({
+          type: 'success',
+          message: t('manage.assistant.elementCreatedToast', {
+            name: element.name,
+          }),
+        })
       }
     }
 
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [assistantOrigin, open, sendCurrentContext])
+  }, [apolloClient, assistantOrigin, open, sendCurrentContext, t])
 
   useEffect(() => {
     if (!open || !frameLoaded || !assistantOrigin || !iframeRef.current) return

apps/frontend-manage/src/components/assistant/manageElementCreatedMessage.ts

@@ -0,0 +1,42 @@
+const MAX_NAME_LENGTH = 200
+
+export const MANAGE_ELEMENT_CREATED_MESSAGE_TYPE =
+  'klicker:manage-element-created'
+
+export type ManageElementCreatedPayload = {
+  id: number
+  name: string
+}
+
+export function isManageElementCreatedMessage(data: unknown): data is {
+  type: typeof MANAGE_ELEMENT_CREATED_MESSAGE_TYPE
+  payload: unknown
+} {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    (data as { type?: unknown }).type === MANAGE_ELEMENT_CREATED_MESSAGE_TYPE
+  )
+}
+
+// The payload crosses a postMessage boundary from the embedded assistant
+// iframe, so it is untrusted data, not an instruction: validate its shape
+// and bounds strictly rather than trusting the sender.
+export function sanitizeManageElementCreatedPayload(
+  payload: unknown
+): ManageElementCreatedPayload | null {
+  if (typeof payload !== 'object' || payload === null) return null
+
+  const { id, name } = payload as Record<string, unknown>
+
+  if (typeof id !== 'number' || !Number.isFinite(id)) return null
+  if (
+    typeof name !== 'string' ||
+    name.length === 0 ||
+    name.length > MAX_NAME_LENGTH
+  ) {
+    return null
+  }
+
+  return { id, name }
+}

apps/frontend-manage/test/manageElementCreatedMessage.test.ts

@@ -0,0 +1,46 @@
+import assert from 'node:assert/strict'
+import {
+  isManageElementCreatedMessage,
+  sanitizeManageElementCreatedPayload,
+} from '../src/components/assistant/manageElementCreatedMessage'
+
+assert.equal(
+  isManageElementCreatedMessage({
+    type: 'klicker:manage-element-created',
+    payload: { id: 1, name: 'Draft question' },
+  }),
+  true
+)
+assert.equal(isManageElementCreatedMessage({ type: 'klicker:other' }), false)
+assert.equal(isManageElementCreatedMessage(null), false)
+assert.equal(
+  isManageElementCreatedMessage('klicker:manage-element-created'),
+  false
+)
+
+assert.deepEqual(
+  sanitizeManageElementCreatedPayload({ id: 42, name: 'Draft question' }),
+  { id: 42, name: 'Draft question' }
+)
+
+// Rejects malformed or out-of-bounds payloads instead of trusting the
+// postMessage sender.
+assert.equal(
+  sanitizeManageElementCreatedPayload({ id: '42', name: 'Draft question' }),
+  null
+)
+assert.equal(sanitizeManageElementCreatedPayload({ id: 42, name: 123 }), null)
+assert.equal(sanitizeManageElementCreatedPayload({ id: 42, name: '' }), null)
+assert.equal(
+  sanitizeManageElementCreatedPayload({ id: 42, name: 'x'.repeat(201) }),
+  null
+)
+assert.equal(
+  sanitizeManageElementCreatedPayload({
+    id: Number.POSITIVE_INFINITY,
+    name: 'Draft question',
+  }),
+  null
+)
+assert.equal(sanitizeManageElementCreatedPayload({ id: 42 }), null)
+assert.equal(sanitizeManageElementCreatedPayload(null), null)

packages/i18n/messages/de.ts

@@ -1219,6 +1219,7 @@ Da die KlickerUZH-App noch nicht im iOS-App-Store verfügbar ist, folgen Sie die
       title: 'KlickerUZH Assistant',
       subtitle: 'Manage',
       openInNewTab: 'Assistent in einem neuen Tab öffnen',
+      elementCreatedToast: 'Entwurf "{name}" zum Fragepool hinzugefügt',
     },
     general: {
       qrCode: 'QR Code',

packages/i18n/messages/en.ts

@@ -1218,6 +1218,7 @@ Since the KlickerUZH app is not yet available in the iOS App Store, follow these
       title: 'KlickerUZH Assistant',
       subtitle: 'Manage',
       openInNewTab: 'Open assistant in a new tab',
+      elementCreatedToast: 'Draft "{name}" added to your question pool',
     },
     general: {
       qrCode: 'QR Code',