Chat revamp

[inikolova]

closes: https://github.com/telerik/kendo-themes-private/issues/375

Design: https://www.figma.com/design/cTPYz7xGzVWYQieZPBkCto/Conversational-UI?node-id=5575-38418&m=dev

This task is part of the ongoing revamp of the Chat component, which is intended to improve the user experience of both human-to-human and human-to-AI interactions within the chat interface. This iteration suggests enhanced rendering and improved styling for the Chat component.

Breaking Changes

This PR suggests the following breaking changes in the Chat component:

Input

• Input currently used as typing area within the component is replaced with vertical oriented TextArea and actions as adornments;

Quick Replies

• Quick Replies are replaced with Suggestions.

<div class="k-message-box-wrapper">
     <span class="k-message-box k-textarea !k-flex-col k-input k-input-md k-input-solid k-rounded-md">
         <textarea class="!k-overflow-auto !k-flex-none k-resize-none k-input-inner" rows="1"></textarea>
         <span class="k-input-suffix k-input-suffix-horizontal">
             .....
         </span>
     </span>
</div>

Message group

• Updated chat message group rendering - the messages, attachments, and author are now wrapped in a new element: k-chat-message-group-content

<div class=“k-chat-message-group”>
    <Avatar />
    <div class=”k-chat-message-group-content”>
        <span class="k-message-author" />
        <div class="k-message">
            <time class="k-message-time" />
            <div class="k-chat-bubble k-bubble”>…</div>
            <span class="k-message-status" />
       </div>
       <div class="k-message”>…</div>
        …
       <ul class="k-chat-attachment-wrapper” />
    </div>
</div>

.k-only, .k-first, .k-middle, .k-last removed

The classes k-only, k-first, k-middle, k-last should be removed

.k-message-group-receiver/sender

The .k-alt class is removed from messages and references in favor of a k-message-group-receiver/sender in the following way:

• .k-message-group-receiver class added to the received messages
• .k-message-group-sender class replaces the k-alt class of the sent messages
• .k-message-reference-receiver class added to k-message-reference of received message
• .k-message-reference-sender class replaces the k-alt class of the k-message-reference of the sent message

New Features

Full width messages

• .k-message-group-full-width classes added to k-message-group if the messages should be full-width

Upload Files Dialog

The k-chat-upload class is required on the k-dialog element.

<div class="k-chat-upload k-dialog k-window">
    <div class="k-window-titlebar k-dialog-titlebar">...</div>
    <div class="k-window-content k-dialog-content">...</div>
    <div class="k-actions k-actions-stretched k-actions-horizontal k-window-actions k-dialog-actions">...</div>
</div>

Others

The current PR suggest also rendering, test and styling for the following newly added features:
- Chat header;
- Attachments - single and multiple;
- Expandable messages;
- Pinned messages;
- Pinned attachments;
- Message reply;
- Message deleted;
- States for the message bubbles;
- Message actions toolbar;
- Message width - full-width messages (only for ai integration);
- Skeleton;
- Typing indicator with animation;
- Stop response generation button;

Also improved styling is suggested for the following:
- Links inside messages;
- Time stamp;
- Suggestions (new Quick Replies) - added states, option for scrolling (default), and theme colors;

[github-actions]

Packages Report

	core	default	classic	bootstrap	material	fluent	utils
Size	29.15 KB (0.0%)	784.71 KB (0.4%🔼)	784.74 KB (0.4%🔼)	797.35 KB (0.4%🔼)	929.90 KB (0.3%🔼)	1153.57 KB (0.1%🔼)	625.19 KB (0.0%)
Gzip Size	4.85 KB (0.0%)	101.50 KB (0.4%🔼)	101.77 KB (0.4%🔼)	104.03 KB (0.6%🔼)	114.87 KB (0.3%🔼)	136.77 KB (0.2%🔼)	52.16 KB (0.0%)
Compile Time	1 s (0.0%)	4 s (0.0%)	3 s (0.0%)	3 s (0.0%)	4 s (0.0%)	5 s (0.0%)	3 s (0.0%)

[zhpenkov]

PR rebased

[zhpenkov]

PR rebased

[zhpenkov]

Here are some things I found confusing while reviewing the visual tests.
I have provided some suggestions below. Please feel free to address any that you find reasonable.

Looking Great Overall 🎉 !