fix: OCR-aware supported file types

[Wallgau]

Summary
Include OCR image types (.bmp, .jpeg, .jpg, .png, .tiff, .webp) in supported upload lists when settings.knowledge.ocr is enabled, matching backend _OCR_REQUIRED_EXTENSIONS.
Move supported file type constants out of knowledge-dropdown.tsx into lib/supported-file-types.ts and expose them via a shared useSupportedFileTypes hook to satisfy React Doctor's only-export-components rule.
Wire OCR-aware file types into Knowledge upload (single file + folder filter) and Chat file attach/dropzone; onboarding keeps the static OCR-off list.

OCR disabled

• Before: Documents accepted, images rejected — same as now
• After: No change in behavior

OCR enabled → upload .png/.jpg via Knowledge File picker

• Before: Images not in the picker; upload blocked at UI
• After: Images appear and upload works

OCR enabled → folder with mixed docs + images

• Before: Images filtered out as “unsupported”; only documents ingested
• After: Images included when OCR is on; unsupported types still skipped

OCR enabled → attach image in Chat (picker or drag-drop)

• Before: Dropzone/accept rejected images
• After: Images accepted when OCR is on

Test plan
With OCR disabled in Settings → Knowledge Base, verify file pickers accept documents only (PDF, DOCX, TXT, etc.) and reject images

Enable OCR in Settings → Knowledge Base, reload, and verify .png/.jpg appear in the Knowledge File picker and upload successfully

With OCR enabled, upload a folder containing mixed documents + images; confirm images are included and unsupported files are skipped

With OCR enabled, attach an image via Chat file picker and drag-and-drop

Toggle OCR off → on in settings without reload; confirm accepted file types update after settings refresh

Summary by CodeRabbit

• New Features

  • File upload dialogs and drag-and-drop areas now dynamically adapt to app settings, enabling additional supported file types when OCR is enabled.
  • Supported formats are now kept consistent across different upload entry points (including chat and onboarding).

• Bug Fixes

  • Improved consistency of allowed-format filtering and rejection behavior so users see matching accepted formats regardless of how they start an upload.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 104b6793-50d0-4745-92fa-6a1992a17db1

📥 Commits

Reviewing files that changed from the base of the PR and between 312fd3e and 5f29c9b.

📒 Files selected for processing (3)

• frontend/app/chat/_components/chat-input.tsx
• frontend/app/onboarding/_components/onboarding-upload.tsx
• frontend/components/knowledge-dropdown.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• frontend/app/onboarding/_components/onboarding-upload.tsx
• frontend/app/chat/_components/chat-input.tsx
• frontend/components/knowledge-dropdown.tsx

---

Walkthrough

A shared supported-file-types module and hook now provide OCR-aware MIME types and extensions. Chat, knowledge, and onboarding upload components use the shared values instead of local constants.

Changes

Supported file types centralization

Layer / File(s)	Summary
Supported file types module and hook frontend/lib/supported-file-types.ts, frontend/hooks/use-supported-file-types.ts	Defines base and OCR-specific mappings, helper functions, compatibility exports, and settings-aware supported file values.
Knowledge dropdown migration frontend/components/knowledge-dropdown.tsx	Uses hook-provided extensions for file inputs and folder filtering, removing the local supported-type exports.
Chat input migration frontend/app/chat/_components/chat-input.tsx	Uses hook-provided MIME types and extensions for dropzone acceptance and the hidden file input.
Onboarding upload import update frontend/app/onboarding/_components/onboarding-upload.tsx	Imports SUPPORTED_EXTENSIONS from the shared supported-file-types module.

Estimated code review effort: 2 (Simple) | ~12 minutes

Suggested labels: bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: making supported file types OCR-aware.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-ocr-file-upload

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 5f29c9b.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/hooks/use-supported-file-types.ts (1)

16-19: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Optional: derive supportedExtensions from memoized supportedFileTypes.

getSupportedExtensions internally calls getSupportedFileTypes again, creating a second object that's immediately discarded. Since both are memoized with the same dependency, you could reuse the already-computed supportedFileTypes to avoid the redundant allocation.

♻️ Optional refactor

   const supportedFileTypes = useMemo(
     () => getSupportedFileTypes(ocrEnabled),
     [ocrEnabled],
   );
   const supportedExtensions = useMemo(
-    () => getSupportedExtensions(ocrEnabled),
-    [ocrEnabled],
+    () => Object.values(supportedFileTypes).flat(),
+    [supportedFileTypes],
   );

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/hooks/use-supported-file-types.ts` around lines 16 - 19, Reuse the
already memoized supportedFileTypes in useSupportedFileTypes instead of calling
getSupportedExtensions(ocrEnabled) directly, since that helper recomputes
getSupportedFileTypes and creates a redundant object. Update the
supportedExtensions derivation to come from supportedFileTypes with the same
ocrEnabled dependency so both values stay in sync while avoiding the extra
allocation.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/hooks/use-supported-file-types.ts`:
- Around line 16-19: Reuse the already memoized supportedFileTypes in
useSupportedFileTypes instead of calling getSupportedExtensions(ocrEnabled)
directly, since that helper recomputes getSupportedFileTypes and creates a
redundant object. Update the supportedExtensions derivation to come from
supportedFileTypes with the same ocrEnabled dependency so both values stay in
sync while avoiding the extra allocation.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f2f3da4e-d46d-48a2-9e9c-c3a702df4dc8

📥 Commits

Reviewing files that changed from the base of the PR and between 1b2a1fd and 913e1c6.

📒 Files selected for processing (5)

• frontend/app/chat/_components/chat-input.tsx
• frontend/app/onboarding/_components/onboarding-upload.tsx
• frontend/components/knowledge-dropdown.tsx
• frontend/hooks/use-supported-file-types.ts
• frontend/lib/supported-file-types.ts

[lucaseduoli]

nice work!