fix(apps/chat): stabilize image attachments and login redirects (#5079)

Co-authored-by: Roland Schlaefli <rolandschlaefli@gmail.com>

Author: TheHummel

AGENTS.md

@@ -211,9 +211,12 @@ Without Traefik, use `http://localhost:<port>` directly. The `*.klicker.com` dom
 - **Participant email uniqueness across auth modes**: Prisma enforces `Participant @@unique([email, isSSOAccount])`, so the same normalized email can exist once as manual and once as SSO. To block new cross-mode duplicates, account creation must explicitly check normalized email collisions in service logic. (`packages/graphql/src/services/accounts.ts`)
 - **Helm v3 secrets are external**: `deploy/charts/klicker-uzh-v3/` deployments reference `envFrom.secretRef` names, but the chart currently defines no `Secret` manifests; secrets must be provisioned out-of-band with matching names. (`deploy/charts/klicker-uzh-v3/templates/`)
 - **Edited chat image hydration needs a stable source id**: Edited branch messages in `apps/chat` get fresh local message ids, so image hydration must distinguish the local target message id from the persisted source message id (`attachmentSourceMessageId`) when fetching and merging attachments. (`apps/chat/src/hooks/useThreadManagement.ts`, `apps/chat/src/stores/chatStore.ts`)
+- **Assistant UI chat drop targets**: `ComposerPrimitive.AttachmentDropzone` must wrap both normal and edit chat composer roots; it owns the drag/drop capture handlers that prevent native browser file navigation, while Klicker-specific limits stay in local composer code. (`apps/chat/src/components/thread.tsx`)
 - **Deployed chat model registries default attachment support off**: `apps/chat` loads `CHAT_MODEL_REGISTRY_JSON` via `chatModelRegistry.ts`, where omitted `supportsImageAttachments` values default to `false`; if deployment values override the built-in registry, each image-capable model must set the flag explicitly in `deploy/env-uzh-*/values.yaml` or the attach button disappears.
 - **Embedded PWA messaging trust boundary**: For embedded PWA pages, use a parent-initiated `postMessage` handshake to capture `event.origin` and avoid `'*'` target origins; do not add a second per-platform messaging allowlist in page code. Embedding permission remains enforced separately by ingress `frame-ancestors`. (`apps/frontend-pwa/src/pages/course/[courseId]/practiceQuizzes/[id].tsx`, `deploy/charts/klicker-uzh-v3/templates/ingress-frontend-pwa.yaml`)
 - **Local embed harness target**: `util/embed-harness/` is for local verification only and should target the branch-local PWA (`http://127.0.0.1:3101/...`), not `https://pwa.klicker.com/...`, because production CSP / `frame-ancestors` blocks localhost embedding. (`util/embed-harness/`)
+- **Chat PWA login redirects**: `apps/chat/src/app/noLogin/page.tsx` must pass an absolute chat URL to the PWA login `redirect_to`; a relative chatbot path makes the PWA redirect to its own domain and 404. Local chat dev also needs ignored local env values for the backend `APP_SECRET` and `DATABASE_URL` so participant cookies verify and Prisma can load chatbot data.
+- **Chat Vitest alias resolution**: `apps/chat/vitest.config.ts` mirrors the app `@/*` alias from `apps/chat/tsconfig.json`; keep this in sync when adding client tests for modules that import from `@/src/...`.
 
 ## Factory Skills (AI Assistance)
 

apps/chat/src/app/noLogin/page.tsx

@@ -4,6 +4,24 @@ interface NoLoginPageProps {
   searchParams?: Promise<{ redirectTo?: string | string[] }>
 }
 
+function getChatRedirectUrl(redirectTo: string | undefined) {
+  if (!redirectTo) return undefined
+
+  const chatBaseUrl = process.env.NEXT_PUBLIC_CHAT_URL
+    ? process.env.NEXT_PUBLIC_CHAT_URL.replace(/\/$/, '')
+    : 'https://chat.klicker.uzh.ch'
+
+  try {
+    const chatUrl = new URL(chatBaseUrl)
+    const redirectUrl = new URL(redirectTo, chatUrl)
+
+    if (redirectUrl.origin !== chatUrl.origin) return undefined
+    return redirectUrl.toString()
+  } catch {
+    return undefined
+  }
+}
+
 export default async function Page({ searchParams }: NoLoginPageProps) {
   const resolvedSearchParams = (await searchParams) ?? {}
   const redirectToParam = resolvedSearchParams.redirectTo
@@ -14,9 +32,10 @@ export default async function Page({ searchParams }: NoLoginPageProps) {
   const loginBaseUrl = process.env.NEXT_PUBLIC_PWA_URL
     ? process.env.NEXT_PUBLIC_PWA_URL.replace(/\/$/, '')
     : 'https://pwa.klicker.uzh.ch'
+  const redirectUrl = getChatRedirectUrl(redirectTo)
 
-  const loginHref = redirectTo
-    ? `${loginBaseUrl}/login?redirect_to=${encodeURIComponent(redirectTo)}`
+  const loginHref = redirectUrl
+    ? `${loginBaseUrl}/login?redirect_to=${encodeURIComponent(redirectUrl)}`
     : `${loginBaseUrl}/login`
 
   return (
@@ -29,10 +48,10 @@ export default async function Page({ searchParams }: NoLoginPageProps) {
           You need to create a KlickerUZH account or log in before you can
           access this chatbot.
         </p>
-        {redirectTo && (
+        {redirectUrl && (
           <p className="text-muted-foreground mt-2 text-sm">
             After logging in, return to{' '}
-            <span className="font-medium">{redirectTo}</span> to continue your
+            <span className="font-medium">{redirectUrl}</span> to continue your
             conversation.
           </p>
         )}

apps/chat/src/components/branch-picker.tsx

@@ -1,22 +1,36 @@
 'use client'
 
+import { getBranches } from '@/src/lib/api/utils'
+import {
+  type ExtendedThreadMessageLike,
+  useChatStore,
+} from '@/src/stores/chatStore'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 import { useCallback, useMemo } from 'react'
-import { useChatStore } from '../stores/chatStore'
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip'
 
+const EMPTY_MESSAGES: ExtendedThreadMessageLike[] = []
+
 interface BranchPickerProps {
   messageId: string
   className?: string
 }
 
 export function BranchPicker({ messageId, className }: BranchPickerProps) {
-  const { getMessageBranches, switchToBranch } = useChatStore()
-
-  // get branches for current message
-  const branches = useMemo(() => {
-    return getMessageBranches(messageId)
-  }, [getMessageBranches, messageId])
+  const switchToBranch = useChatStore((state) => state.switchToBranch)
+
+  // get all messages from the active thread to compute branches
+  const allMessages = useChatStore((state) => {
+    const activeThread = state.threads.find(
+      (t) => t.id === state.activeThreadId
+    )
+    return activeThread?.allMessages ?? EMPTY_MESSAGES
+  })
+
+  const branches = useMemo(
+    () => getBranches(allMessages, messageId),
+    [allMessages, messageId]
+  )
 
   const currentIndex = useMemo(() => {
     const directIndex = branches.findIndex((branch) => branch.id === messageId)
@@ -25,22 +39,15 @@ export function BranchPicker({ messageId, className }: BranchPickerProps) {
     }
 
     // if no direct match, might be an assistant message, find corresponding user message
-    const currentThread = useChatStore
-      .getState()
-      .threads.find((t) => t.id === useChatStore.getState().activeThreadId)
-    if (currentThread) {
-      const currentMessage = currentThread.allMessages.find(
-        (m) => m.id === messageId
+    const currentMessage = allMessages.find((m) => m.id === messageId)
+    if (currentMessage?.role === 'assistant' && currentMessage.parentId) {
+      return branches.findIndex(
+        (branch) => branch.id === currentMessage.parentId
       )
-      if (currentMessage?.role === 'assistant' && currentMessage.parentId) {
-        return branches.findIndex(
-          (branch) => branch.id === currentMessage.parentId
-        )
-      }
     }
 
     return -1
-  }, [branches, messageId])
+  }, [branches, messageId, allMessages])
 
   const switchToBranchHandler = useCallback(
     (branchIndex: number) => {

apps/chat/src/components/markdown-text.tsx

@@ -141,6 +141,8 @@ const defaultComponents = memoizeMarkdownComponents({
         'text-primary font-medium underline underline-offset-4',
         className
       )}
+      target="_blank"
+      rel="noopener noreferrer"
       {...props}
     />
   ),

apps/chat/src/components/message-attachments.tsx

@@ -8,7 +8,6 @@ import {
   getAttachmentPreviewSrc,
 } from '../lib/attachments/attachmentUi'
 import { useChatStore } from '../stores/chatStore'
-import { useComposerStore } from '../stores/composerStore'
 import {
   AttachmentPlaceholder,
   ThreadImageViewerModal,
@@ -47,10 +46,6 @@ export function MessageAttachments({
   const ensureFullImageAttachments = useChatStore(
     (state) => state.ensureFullImageAttachments
   )
-  const setAttachmentError = useComposerStore(
-    (state) => state.setAttachmentError
-  )
-
   const [viewerAttachmentIndex, setViewerAttachmentIndex] = useState<
     number | null
   >(null)
@@ -73,8 +68,6 @@ export function MessageAttachments({
       return
     }
 
-    setAttachmentError(null)
-
     if (hasAllImageAttachmentsHydrated(attachments)) {
       return
     }
@@ -92,7 +85,6 @@ export function MessageAttachments({
       const hydratedAttachments = hydratedMessage?.imageAttachments ?? []
 
       if (!hasAllImageAttachmentsHydrated(hydratedAttachments)) {
-        setAttachmentError(HYDRATION_ERROR_MESSAGE)
         setViewerError(HYDRATION_ERROR_MESSAGE)
       }
     } finally {
@@ -115,7 +107,6 @@ export function MessageAttachments({
 
     setViewerAttachmentIndex(index)
     setViewerError(null)
-    setAttachmentError(null)
 
     if (openState.shouldHydrate) {
       await hydrateMessageAttachments()

apps/chat/src/components/thread-image-viewer-modal.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Markdown } from '@klicker-uzh/markdown'
 import { Button, Modal } from '@uzh-bf/design-system'
 
 type MessageImageAttachment = {
@@ -47,7 +48,8 @@ export function ThreadImageViewerModal({
 
   const previewSrc =
     attachment.imageBase64 ?? attachment.imagePreviewBase64 ?? null
-  const title = attachment.imageDescription?.trim() || 'Image attachment'
+  const description = attachment.imageDescription?.trim() || null
+  const title = 'Image attachment'
 
   return (
     <Modal
@@ -63,13 +65,23 @@ export function ThreadImageViewerModal({
         {previewSrc ? (
           <img
             src={previewSrc}
-            alt={title}
+            alt={description || title}
             className="max-h-[70vh] w-full rounded-lg border object-contain"
           />
         ) : (
           <AttachmentPlaceholder />
         )}
 
+        {description ? (
+          <Markdown
+            content={description}
+            withProse
+            className={{
+              root: 'prose prose-sm text-foreground max-w-none',
+            }}
+          />
+        ) : null}
+
         {isLoading ? (
           <p className="text-muted-foreground text-sm">Loading full image...</p>
         ) : null}