feat(frontend): better ui for long loading files by RichardSiegel · Pull Request #983 · codecentric/c4-genai-suite

RichardSiegel · 2026-01-09T16:11:28Z

Closes #982

Copilot

Pull request overview

Improves the chat file-upload UI to better communicate long-running uploads by adding delayed “waiting” messages to uploading file chips and refining the file-chip presentation.

Changes:

Add two new i18n strings for “waiting” upload status and wire them into the texts helper.
Update the file chip (FileItemComponent) to show delayed waiting messages while uploading and display upload timestamps for completed files.
Refactor ChatInput to render a unified, sorted list of uploading + uploaded files; add global CSS animations to support delayed/alternating status hints.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
services/reis/uv.lock	Bumps Python dependencies (appears unrelated to the frontend upload UI change).
frontend/src/texts/languages/en.ts	Adds English strings for the new long-upload waiting messages.
frontend/src/texts/languages/de.ts	Adds German strings for the new long-upload waiting messages.
frontend/src/texts/index.ts	Exposes the new `files.waitingMessage1/2` translation keys through `texts`.
frontend/src/pages/chat/useChatDropzone.ts	Adjusts pending upload tracking (related to showing/allowing multiple pending uploads).
frontend/src/pages/chat/conversation/FileItem.tsx	Adds UI for delayed waiting hints during upload and shows uploaded timestamps; improves delete UX.
frontend/src/pages/chat/conversation/ChatInput.tsx	Renders uploading + uploaded files together with metadata/sorting logic.
frontend/src/index.css	Adds keyframes/classes used to delay and alternate the waiting hint text.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-24T13:27:25Z

+              <div className="animate-show-after-7s relative h-5">
+                <span className="animate-alternate-first absolute top-0 right-0 left-0 truncate text-sm font-medium text-orange-800 italic">
+                  {texts.files.waitingMessage1}
+                </span>
+                <span className="animate-alternate-second absolute top-0 right-0 left-0 truncate text-sm font-medium text-orange-800 italic">
+                  {texts.files.waitingMessage2}
+                </span>


The new long-upload hint text does not match the copy in #982 (“This may take a while...”), and the two-message alternation (‘processing...’ / ‘a few minutes more’) may not satisfy the requirement as written. If the issue expects the exact string, update the translation keys/copy accordingly (and ensure it’s only shown after the intended delay).

Copilot · 2026-02-24T13:27:26Z

+            {loading && (
+              <div className="animate-show-after-7s relative h-5">
+                <span className="animate-alternate-first absolute top-0 right-0 left-0 truncate text-sm font-medium text-orange-800 italic">
+                  {texts.files.waitingMessage1}
+                </span>
+                <span className="animate-alternate-second absolute top-0 right-0 left-0 truncate text-sm font-medium text-orange-800 italic">
+                  {texts.files.waitingMessage2}
+                </span>
+              </div>
+            )}


The new long-upload UI behavior (showing an additional hint after a delay) isn’t covered by existing frontend tests. Since this PR introduces user-visible behavior tied to timing/visibility, consider adding a unit test around the FileItemComponent/ChatInput rendering that asserts the hint elements/classes are present for loading items (and, if feasible, that they are delayed via the expected CSS class).

Copilot · 2026-02-24T13:27:26Z

+              .map((m, index) => ({
+                fileName: m.variables?.file?.name || '',
+                isUploading: true,
+                originalFile: m.variables?.file,
+                uploadTime: new Date(),
+                uniqueKey: `${m.submittedAt}-${index}`,


uniqueKey includes the index from the filtered pending mutations list. When one pending upload settles, indices of the remaining items can shift, changing keys and remounting FileItemComponent (which will reset the “show after N seconds” animation/timer). Prefer a key derived only from stable mutation identity (e.g., submittedAt plus file name) rather than the array index.

Suggested change

.map((m, index) => ({

fileName: m.variables?.file?.name || '',

isUploading: true,

originalFile: m.variables?.file,

uploadTime: new Date(),

uniqueKey: `${m.submittedAt}-${index}`,

.map((m) => ({

fileName: m.variables?.file?.name || '',

isUploading: true,

originalFile: m.variables?.file,

uploadTime: new Date(),

uniqueKey: `${m.submittedAt}-${m.variables?.file?.name || ''}`,

Copilot · 2026-02-24T13:27:27Z

+  }
+}
+.animate-show-after-7s {
+  animation: show-after-delay 5.5s forwards;


The CSS class name animate-show-after-7s implies a 7s delay, but it currently runs show-after-delay for 5.5s (with the element only becoming visible at the end). This will show the “long upload” hint earlier than intended and is likely out of sync with the 7s requirement; consider implementing an actual 7s delay (e.g., via animation-delay: 7s) and aligning the keyframes accordingly.

Suggested change

animation: show-after-delay 5.5s forwards;

animation: show-after-delay 7s forwards;

Copilot · 2026-02-24T13:27:27Z

+                fileName: m.variables?.file?.name || '',
+                isUploading: true,
+                originalFile: m.variables?.file,
+                uploadTime: new Date(),


uploadTime is set to new Date() during render for each pending mutation, so it changes on every re-render. Because it participates in sorting, the ordering of file chips can become unstable/jittery; use a stable timestamp from the mutation (e.g., m.submittedAt) instead.

Suggested change

uploadTime: new Date(),

uploadTime: new Date(m.submittedAt || 0),

Copilot · 2026-02-24T13:27:27Z

    extensionFilesToUpload?.forEach(({ filesToUpload, extensionId }) => {
      filesToUpload.forEach((file) => {
        upload.mutate({
          file,
          extensionId,
        });
      });


Issue #982 calls for prompting the user when they re-upload a file with the same name while the first upload is still in progress. handleUploadFile currently starts uploads immediately and there is no check for an existing pending upload with the same file.name nor any confirmation UI, so the second requirement in #982 does not appear to be implemented.

… time-stamps

… when done loading

…or deleting a file

RichardSiegel marked this pull request as draft January 9, 2026 16:12

RichardSiegel assigned surt91, RichardSiegel, mgutbier-cc and Johardt Jan 9, 2026

surt91 changed the title ~~better-ui-for-long-loading-files~~ feat(frontend): betterui-for-long-loading-files Jan 12, 2026

surt91 changed the title ~~feat(frontend): betterui-for-long-loading-files~~ feat(frontend): better ui for long loading files Jan 12, 2026

RichardSiegel unassigned Johardt Jan 12, 2026

joelgarthe force-pushed the feature/better-ui-for-long-loading-files branch from 097ce66 to 32cd128 Compare January 12, 2026 15:34

surt91 assigned joelgarthe Jan 12, 2026

mgutbier-cc marked this pull request as ready for review February 24, 2026 13:22

Copilot AI review requested due to automatic review settings February 24, 2026 13:22

Copilot started reviewing on behalf of mgutbier-cc February 24, 2026 13:23 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

RichardSiegel and others added 14 commits February 24, 2026 15:50

static file-chip size change to make room for still loading note

b42742c

added loading animation

5517ec0

feat(frontend): enhance loading message with alternate animations

14376e4

feat: use translation keys for upload animation text

5eaebab

feat: fix wrong placement of alternating loading texts

cd31a45

feat: make icon smaller

ec3c413

feat: only show loading text while loading

530cddf

chore: fix issue with jumping file order when uploading is done.

1e4ab99

chore: add delete feedback to file icons

1a2a35d

feat: improved file-upload sorting and duplicate handling with upload…

6636648

… time-stamps

chore: add timestamp translation for german

8142f70

refactored and improved gray out of deleting files

292b7ec

fix loading state representation of multiple files with the same name…

86ae55d

… when done loading

chore: hover-to-show-option-area is now equal to the clickable-area f…

25de073

…or deleting a file

mgutbier-cc force-pushed the feature/better-ui-for-long-loading-files branch from 472817d to 25de073 Compare February 24, 2026 14:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): better ui for long loading files#983

feat(frontend): better ui for long loading files#983
RichardSiegel wants to merge 14 commits into
mainfrom
feature/better-ui-for-long-loading-files

RichardSiegel commented Jan 9, 2026 •

edited by surt91

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

	animation: show-after-delay 5.5s forwards;
	animation: show-after-delay 7s forwards;

	uploadTime: new Date(),
	uploadTime: new Date(m.submittedAt \|\| 0),

Conversation

RichardSiegel commented Jan 9, 2026 • edited by surt91 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

RichardSiegel commented Jan 9, 2026 •

edited by surt91

Loading