Polish Chat UX and Accessibility by d-oit · Pull Request #328 · d-oit/do-knowledge-studio

d-oit · 2026-06-19T04:17:45Z

Polished the Chat interface by aligning it with the existing design system and improving its accessibility and interaction model. Key changes include refactoring CSS classes to use standard tokens, making suggested actions functional, adding live regions for assistive technologies, and enabling navigation from search citations to the entity editor.

PR created automatically by Jules for task 9567878978023015962 started by @d-oit

google-labs-jules · 2026-06-19T04:17:46Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

deepsource-io · 2026-06-19T04:18:36Z

DeepSource Code Review

We reviewed changes in 5172ee8...0b83117 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Updated (UTC)	Details
JavaScript	Jun 19, 2026 11:29a.m.	Review ↗
Python	Jun 19, 2026 11:29a.m.	Review ↗
Shell	Jun 19, 2026 11:29a.m.	Review ↗
SQL	Jun 19, 2026 11:29a.m.	Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

deepsource-io · 2026-06-19T04:18:40Z

  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  const handleSend = async (e?: React.FormEvent) => {
+  const handleSend = async (e?: React.FormEvent, query?: string) => {


`handleSend` has a cyclomatic complexity of 7 with "medium" risk

A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

deepsource-io · 2026-06-19T04:18:40Z

            <div className="suggested-actions">
-              <button onClick={() => setInput('Summarize my recent projects')}>Summarize recent projects</button>
-              <button onClick={() => setInput('Who are the key people?')}>Key people</button>
+              <button onClick={() => { void handleSend(undefined, 'Summarize my recent projects'); }}>Summarize recent projects</button>


Expected 'undefined' and instead saw 'void'

The void operator takes an operand and returns undefined. It can be used to ignore the value produced by an expression. However, this can lead to code that is difficult to understand and maintain. Historically, the void operator was used to get a "pure" undefined value, as the undefined variable was mutable prior to ES5.

deepsource-io · 2026-06-19T04:18:40Z

-              <button onClick={() => setInput('Summarize my recent projects')}>Summarize recent projects</button>
-              <button onClick={() => setInput('Who are the key people?')}>Key people</button>
+              <button onClick={() => { void handleSend(undefined, 'Summarize my recent projects'); }}>Summarize recent projects</button>
+              <button onClick={() => { void handleSend(undefined, 'Who are the key people?'); }}>Key people</button>


Expected 'undefined' and instead saw 'void'

The void operator takes an operand and returns undefined. It can be used to ignore the value produced by an expression. However, this can lead to code that is difficult to understand and maintain. Historically, the void operator was used to get a "pure" undefined value, as the undefined variable was mutable prior to ES5.

deepsource-io · 2026-06-19T04:18:40Z


-      <form className="ask-composer" onSubmit={e => void handleSend(e)}>
-        <div className="input-container">
+      <form className="chat-controls" onSubmit={e => void handleSend(e)}>


Expected 'undefined' and instead saw 'void'

The void operator takes an operand and returns undefined. It can be used to ignore the value produced by an expression. However, this can lead to code that is difficult to understand and maintain. Historically, the void operator was used to get a "pure" undefined value, as the undefined variable was mutable prior to ES5.

codacy-production · 2026-06-19T04:20:09Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 5 complexity · 0 duplication

Metric Results

Complexity 5

Duplication 0

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer}
_{TIP This summary will be updated as you push new changes.}

…t polish (#329) * feat(ui): implement GOAP plan tasks - tokens, overlay, responsive, chat polish - Fix PR #328 DeepSource issues: reduce cyclomatic complexity, fix void operator usage - Add missing CSS token aliases (--border-color, --surface-primary/secondary) - Add semantic token families (status, entity, graph, control-height, z-index, focus-ring) - Add prefers-reduced-motion policy - Create Overlay primitive with focus trap, Escape, scroll lock - Create useScrollLock hook - Fix 100vh → 100dvh with fallback for mobile viewport - Add safe-area insets for notched devices - Add viewport-fit=cover for iOS - Fix touch targets (44px) for coarse pointers - Fix graph/mindmap canvas height with clamp() - Update plans/INDEX.md with new plan and ADR entries * fix(ui): address DeepSource issues - arrow functions, void operator, global scope * fix(chat): resolve Codacy issues - proper keys, button types, suppress false positives * fix(test): update E2E test to use correct chat-view class selector * fix(test): update E2E test to use correct message class selector --------- Co-authored-by: d-oit <do-it@ik.me>

deepsource-io · 2026-06-19T11:03:22Z

+    return `I couldn't find any direct matches in your local library for "${queryText}". You might want to try different keywords or add more context to your entities.`;
+  };
+
+  const handleSend = async (e?: React.FormEvent, query?: string) => {


`handleSend` has a cyclomatic complexity of 6 with "medium" risk

A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

deepsource-io · 2026-06-19T11:03:23Z

            </div>
          </div>
        )}
        {messages.map((m, i) => (


Function has a cyclomatic complexity of 6 with "medium" risk

A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

deepsource-io · 2026-06-19T11:03:23Z

        )}
        {messages.map((m, i) => (
-          <div key={i} className={`message-wrapper ${m.role}`}>
+          <div key={i} className={`message ${m.role}`}>


Do not use Array index in keys

When rendering a list of items in React, it is necessary to pass a "key" prop.
This key is used by React to identify which items have changed, are added, or are removed and should be stable.
It is not recommended to use the index of an element as key because it doesn't uniquely identify the element.
When elements are added/removed from an array, the index of an element may change, which will result in unnecessary re-renders.

deepsource-io · 2026-06-19T11:07:16Z

+const ChatMessage: React.FC<{
+  message: Message;
+  showSources: boolean;
+  onToggleSources: () => void;
+  onNavigate?: (id: string) => void;
+}> = ({ message, showSources, onToggleSources, onNavigate }) => (


`ChatMessage` has a cyclomatic complexity of 6 with "medium" risk

A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

…mproved flow - Refactor Chat component: extract ChatMessage, CitationsPanel components - Add canSend/scheduleDebounceReset helpers to reduce complexity - Use stable message.id keys instead of array index - Wrap void arrow functions with braces - Add searching-indicator CSS class, remove inline styles - Add onNavigate prop for citation navigation to entity editor - Update e2e tests for new chat class names - Pass onNavigate through App.tsx to Chat component

…mproved flow - Standardized CSS classes in Chat.tsx to match design system tokens. - Implemented functional suggested actions that trigger searches. - Replaced custom loading indicator with semantic Loader2 icon. - Added role="log" and aria-live="polite" for screen reader support. - Enabled navigation from citations back to the editor via onNavigate. - Refactored Chat.tsx into smaller components (ChatMessage, CitationsPanel). - Ensured E2E tests are aligned with the new structure. Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>

- Standardized CSS classes in Chat.tsx to match design system tokens and features.css. - Implemented functional suggested actions that trigger searches immediately. - Replaced custom loading indicator with semantic Loader2 icon and animate-spin utility. - Added role="log" and aria-live="polite" for better screen reader support. - Enabled navigation from citations back to the editor via onNavigate prop. - Refactored Chat.tsx into smaller components (ChatMessage, CitationsPanel) with standard function declarations to resolve linting false positives. - Fixed unhandled promises in event handlers to satisfy ESLint rules. - Updated E2E tests to reflect class renames and ensure continued stability. Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>

github-actions Bot added config tests Related to automated/manual tests labels Jun 19, 2026

deepsource-io Bot reviewed Jun 19, 2026

View reviewed changes

d-oit mentioned this pull request Jun 19, 2026

feat(ui): GOAP plan implementation - tokens, overlay, responsive, chat polish #329

Merged

4 tasks

deepsource-io Bot reviewed Jun 19, 2026

View reviewed changes

github-actions Bot removed the tests Related to automated/manual tests label Jun 19, 2026

d-oit force-pushed the feat/ux-chat-polish-9567878978023015962 branch from 5714523 to 56d4702 Compare June 19, 2026 11:43

github-actions Bot added the documentation Documentation improvements label Jun 19, 2026

d-oit merged commit 4d63a69 into main Jun 19, 2026
21 checks passed

d-oit deleted the feat/ux-chat-polish-9567878978023015962 branch June 19, 2026 13:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polish Chat UX and Accessibility#328

Polish Chat UX and Accessibility#328
d-oit merged 3 commits into
mainfrom
feat/ux-chat-polish-9567878978023015962

d-oit commented Jun 19, 2026

Uh oh!

google-labs-jules Bot commented Jun 19, 2026

Uh oh!

deepsource-io Bot commented Jun 19, 2026 •

edited

Loading

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

codacy-production Bot commented Jun 19, 2026 •

edited

Loading

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

deepsource-io Bot Jun 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

d-oit commented Jun 19, 2026

Uh oh!

google-labs-jules Bot commented Jun 19, 2026

Uh oh!

deepsource-io Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

`handleSend` has a cyclomatic complexity of 7 with "medium" risk

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

Expected 'undefined' and instead saw 'void'

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

Expected 'undefined' and instead saw 'void'

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

Expected 'undefined' and instead saw 'void'

Uh oh!

codacy-production Bot commented Jun 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

`handleSend` has a cyclomatic complexity of 6 with "medium" risk

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

Function has a cyclomatic complexity of 6 with "medium" risk

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

Do not use Array index in keys

Uh oh!

deepsource-io Bot Jun 19, 2026

Choose a reason for hiding this comment

`ChatMessage` has a cyclomatic complexity of 6 with "medium" risk

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

deepsource-io Bot commented Jun 19, 2026 •

edited

Loading

codacy-production Bot commented Jun 19, 2026 •

edited

Loading