Merge remote-tracking branch 'my/26_1_global_format' into 26_1_global_format

# Conflicts:
#	packages/devextreme/js/__internal/core/localization/date.global_formats.test.ts

Author: GoodDayForSurf

apps/demos/Demos/Chat/MessageStreaming/description.md

@@ -0,0 +1,19 @@
+This demo implements the DevExtreme Chat component with [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-services/openai-service) to stream AI-generated responses in real time. As the AI model produces output token by token, the Chat component renders the response incrementally inside a message bubble. A typing indicator appears while the response is being streamed, and the send button transforms into a stop button so that users can cancel an in-progress stream at any time.
+
+The empty Chat displays custom suggestion cards. Clicking a card sends the corresponding prompt directly to the AI without extra user input.
+
+<!--split-->
+
+## Streaming AI Responses
+
+The demo calls the Azure OpenAI Chat Completions API with `stream: true`. Incoming delta chunks are passed through a `createDelayedRenderer` queue that introduces a short display delay between chunks to produce a smooth typing effect. The demo appends each chunk to a growing buffer and updates the assistant message in the data store with every render cycle via a `dataSource.store().push(...)` call.
+
+## Stopping a Stream
+
+The demo creates an `AbortController` before each request and passes its `signal` (`AbortSignal`) to the Azure OpenAI SDK in the request options. When the user clicks the stop button, the demo calls `abortController.abort()` to cancel the in-progress HTTP request.
+
+The [sendButtonOptions](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#sendButtonOptions) property switches the button's `action` property to `'custom'` and the icon to `'stopfilled'` while streaming is active, then reverts to the default (send) configuration once streaming ends.
+
+## Custom Empty View
+
+The Chat component specifies an [emptyViewTemplate](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#emptyViewTemplate) that replaces the default empty state with custom suggestion cards. Clicking a card creates a message and triggers the demo message sending flow directly, bypassing the text input.

apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.ts

@@ -68,6 +68,7 @@ export class AppComponent {
 
   toggleDisabledState(disabled: boolean, event = undefined) {
     this.isDisabled = disabled;
+    this.suggestions = { ...this.suggestions, disabled };
 
     if (disabled) {
       event?.target.blur();
@@ -77,6 +78,8 @@ export class AppComponent {
   }
 
   async onMessageEntered(e: DxChatTypes.MessageEnteredEvent): Promise<void> {
+    if (this.isDisabled) return;
+
     if (!this.appService.alerts.length) {
       this.toggleDisabledState(true, e.event);
     }

apps/demos/Demos/Chat/PromptSuggestions/React/App.tsx

@@ -28,20 +28,20 @@ export default function App() {
   } = useApi();
 
   const [typingUsers, setTypingUsers] = useState<ChatTypes.User[]>([]);
-  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [inputFieldText, setInputFieldText] = useState<string>('');
   const [suggestionList, setSuggestionList] = useState(suggestionItems);
   const sendImmediately = useRef<boolean>(false);
   const hideAfterUse = useRef<boolean>(false);
 
   const processAIRequest = useCallback(async (message: ChatTypes.Message): Promise<void> => {
-    setIsProcessing(true);
+    setIsDisabled(true);
     setTypingUsers([assistant]);
 
     await fetchAIResponse(message);
 
     setTypingUsers([]);
-    setIsProcessing(false);
+    setIsDisabled(false);
   }, [fetchAIResponse]);
 
   const onSuggestionClick = useCallback((e: { itemData?: { text: string; prompt: string } }) => {
@@ -64,9 +64,10 @@ export default function App() {
     }
   }, [alerts.length, insertMessage, processAIRequest]);
 
-  const suggestions = { items: suggestionList, onItemClick: onSuggestionClick };
+  const suggestions = { items: suggestionList, onItemClick: onSuggestionClick, disabled: isDisabled };
 
   const onMessageEntered = useCallback(async ({ message, event }: ChatTypes.MessageEnteredEvent): Promise<void> => {
+    if (isDisabled) return;
     insertMessage({ id: Date.now(), ...message });
 
     if (!alerts.length) {
@@ -76,7 +77,7 @@ export default function App() {
 
       (event?.target as HTMLElement).focus();
     }
-  }, [insertMessage, alerts.length, processAIRequest]);
+  }, [isDisabled, insertMessage, alerts.length, processAIRequest]);
 
   const onInputFieldTextChanged = useCallback((e: ChatTypes.InputFieldTextChangedEvent) => {
     setInputFieldText(e?.value ?? '');
@@ -87,7 +88,7 @@ export default function App() {
   return (
     <>
       <Chat
-        className={isProcessing ? CHAT_DISABLED_CLASS : ''}
+        className={isDisabled ? CHAT_DISABLED_CLASS : ''}
         dataSource={dataSource}
         reloadOnChange={false}
         showAvatar={false}

apps/demos/Demos/Chat/PromptSuggestions/ReactJs/App.js

@@ -19,18 +19,18 @@ loadMessages({
 export default function App() {
   const { alerts, insertMessage, fetchAIResponse } = useApi();
   const [typingUsers, setTypingUsers] = useState([]);
-  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
   const [inputFieldText, setInputFieldText] = useState('');
   const [suggestionList, setSuggestionList] = useState(suggestionItems);
   const sendImmediately = useRef(false);
   const hideAfterUse = useRef(false);
   const processAIRequest = useCallback(
     async (message) => {
-      setIsProcessing(true);
+      setIsDisabled(true);
       setTypingUsers([assistant]);
       await fetchAIResponse(message);
       setTypingUsers([]);
-      setIsProcessing(false);
+      setIsDisabled(false);
     },
     [fetchAIResponse],
   );
@@ -54,17 +54,22 @@ export default function App() {
     },
     [alerts.length, insertMessage, processAIRequest],
   );
-  const suggestions = { items: suggestionList, onItemClick: onSuggestionClick };
+  const suggestions = {
+    items: suggestionList,
+    onItemClick: onSuggestionClick,
+    disabled: isDisabled,
+  };
   const onMessageEntered = useCallback(
     async ({ message, event }) => {
+      if (isDisabled) return;
       insertMessage({ id: Date.now(), ...message });
       if (!alerts.length) {
         (event?.target).blur();
         await processAIRequest(message);
         (event?.target).focus();
       }
     },
-    [insertMessage, alerts.length, processAIRequest],
+    [isDisabled, insertMessage, alerts.length, processAIRequest],
   );
   const onInputFieldTextChanged = useCallback((e) => {
     setInputFieldText(e?.value ?? '');
@@ -73,7 +78,7 @@ export default function App() {
   return (
     <>
       <Chat
-        className={isProcessing ? CHAT_DISABLED_CLASS : ''}
+        className={isDisabled ? CHAT_DISABLED_CLASS : ''}
         dataSource={dataSource}
         reloadOnChange={false}
         showAvatar={false}

apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue

@@ -81,6 +81,7 @@ onBeforeMount(() => {
 
 function toggleDisabledState(disabled: boolean, event?: Events.EventObject): void {
   isDisabled.value = disabled;
+  suggestions.value = { ...suggestions.value, disabled };
 
   if (disabled) {
     (event?.target as HTMLElement)?.blur();
@@ -136,6 +137,8 @@ function alertLimitReached(): void {
 }
 
 function onMessageEntered({ message, event }: DxChatTypes.MessageEnteredEvent): void {
+  if (isDisabled.value) return;
+
   dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
 
   if (!alerts.value.length) {

apps/demos/Demos/Chat/PromptSuggestions/jQuery/index.js

@@ -47,6 +47,8 @@ $(() => {
   }
 
   function toggleDisabledState(disabled, event) {
+    isDisabled = disabled;
+    instance.option({ suggestions: { disabled } });
     instance.element().toggleClass(CHAT_DISABLED_CLASS, disabled);
 
     if (disabled) {
@@ -139,6 +141,7 @@ $(() => {
     paginate: false,
   });
 
+  let isDisabled = false;
   let sendImmediately = false;
   let hideAfterUse = false;
 
@@ -176,6 +179,8 @@ $(() => {
     speechToTextEnabled: true,
     suggestions,
     onMessageEntered: (e) => {
+      if (isDisabled) return;
+
       const { message, event } = e;
 
       dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);