[dmlvr]

---

_{Stack created with GitHub Stacks CLI • Give Feedback 💬}

[Copilot]

🟡 Changes recommended

Keyboard submission while a request is pending can erase user input, and tool calls at the round limit can silently produce an empty answer reported as successful across the demo implementations.

2 open issues

• Disable the chat input while a request is pending · New
• Handle tool calls that reach the round limit · New

What changed in this PR

Adds tool-call visualization demos for DevExtreme Chat in Angular, Vue, jQuery, and React (TypeScript and JavaScript).

Changes:

• Connects Chat to Azure OpenAI with simulated weather, time, and currency tools.
• Adds suggestion cards demonstrating single-tool, multiple-tool, and error scenarios.
• Provides expandable tool details, clear-history controls, typing indicators, and error alerts.

All file paths below are relative to apps/demos/Demos/Chat/ToolCallVisualization/.

File	Description
Vue/​service.ts	Sends model requests with tool definitions.
Vue/​index.ts	Mounts the Vue application.
Vue/​index.html	Hosts the Vue demo and loads assets.
Vue/​data.ts	Defines prompts, simulated tools, users, and message storage.
Vue/​App.vue	Implements chat interactions, tool execution, and styling.
ReactJs/​useApi.js	Manages conversation history, messages, and alerts.
ReactJs/​styles.css	Styles the chat layout and suggestion cards.
ReactJs/​service.js	Implements model requests and tool execution.
ReactJs/​index.js	Mounts the JavaScript React application.
ReactJs/​index.html	Hosts the JavaScript React demo.
ReactJs/​data.js	Defines users, suggestion cards, and constants.
ReactJs/​App.js	Implements chat controls and suggestion interactions.
React/​useApi.ts	Manages typed conversation state and alerts.
React/​styles.css	Styles the chat layout and suggestion cards.
React/​service.ts	Implements typed model requests and tool execution.
React/​index.tsx	Mounts the TypeScript React application.
React/​index.html	Hosts the TypeScript React demo and loads assets.
React/​data.ts	Defines typed users, suggestions, and constants.
React/​App.tsx	Implements typed chat controls and interactions.
jQuery/​styles.css	Styles the chat layout and suggestion cards.
jQuery/​index.js	Initializes widgets and handles conversations and tools.
jQuery/​index.html	Hosts the demo and loads libraries.
jQuery/​data.js	Defines model settings, prompts, and simulated tools.
Angular/​index.html	Hosts and loads the Angular application.
Angular/​app/​app.service.ts	Manages conversation state and tool execution.
Angular/​app/​app.component.ts	Coordinates UI state and bootstraps the application.
Angular/​app/​app.component.html	Defines chat, toolbar, suggestions, and options.
Angular/​app/​app.component.css	Styles the Angular demo and Chat internals.
Angular/​app/​ai/​ai.service.ts	Encapsulates Azure OpenAI requests.

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Retry submissions are silently skipped while the error alert remains visible, and the CSP image allowlist excludes the demo’s data-URL assistant avatar.

1 open issue

• CSP image policy blocks data-URI assistant avatars · New

1 previously missed issue

In code that hasn't changed since last review

Visible error alert skips retry submissions

apps/​demos/​Demos/​Chat/​ToolCallVisualization/​React/​App.tsx:76

After a request fails, Chat is re-enabled while the alert remains for 60 seconds; submissions during that interval appear in the conversation but never reach the model because this guard skips processing. Process submissions independently of alert visibility, and remove Angular's matching alert guard around toggleDisabledState so retries still disable Chat. The same issue occurs in this demo's ReactJs/App.js:57, Vue/App.vue:260, jQuery/index.js:280, and Angular/app/app.service.ts:374 (with the matching component guard at Angular/app/app.component.ts:87).

2 resolved since last review

• Handle tool calls that reach the round limit
• Disable the chat input while a request is pending

_{Review effort: Balanced}

[Copilot]

🔵 Needs a closer look

After an API or round-limit error, alert-dependent guards silently block subsequent submissions for 60 seconds despite re-enabling the composer, preventing retries across multiple demo implementations.

No open issues 🎉

1 previously missed issue

In code that hasn't changed since last review

Error alert blocks chat retries after the composer is re-enabled

apps/​demos/​Demos/​Chat/​ToolCallVisualization/​React/​App.tsx:76

After an API or round-limit error, Chat is re-enabled while the alert remains for 60 seconds; subsequent submissions are displayed, but this guard prevents them from reaching the model or conversation history. Allow retries independently of alert visibility in both submission handlers, or keep the composer disabled during an explicit cooldown. The same issue occurs in this demo's ReactJs/App.js:57, Vue/App.vue:260, jQuery/index.js:280, and Angular/app/app.service.ts:374; allowing Angular retries also requires removing the alert-dependent busy-state guard in Angular/app/app.component.ts:87.

1 resolved since last review

• CSP image policy blocks data-URI assistant avatars

_{Review effort: Balanced}

[Copilot]

🔵 Needs a closer look

Human assessment is needed because post-failure alert handling can show new submissions in the transcript without sending them to the model or recording them in its history across multiple demo implementations.

No open issues 🎉

_{Review effort: Balanced}