docs(chatbot): add component pages#244
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces documentation and sidebar configuration for new AI chatbot components, including an overview, chat input, user message, and AI message. The reviewer provided feedback on several markdown files to align the component descriptions with the repository style guide, specifically recommending the use of plural component names, active voice, and referring to 'users' instead of 'the user'. All review comments are valid and should be addressed.
Expand the chat-input documentation with a full usage guide (anatomy, options, behavior/overflow, states, dos & don'ts, and related links). Also add three Figma illustration PNGs to static/figma to support the new documentation.
✅ Deploy Preview for industrial-experience ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
* new guide for ai message * new guide for chat * new guide for user message * renamed folder and chat (removed AI)
flxlst09
left a comment
flxlst09
left a comment
There was a problem hiding this comment.
Like it, very concise!
- Chat attachment still open
- Entries in component overview missing
- How to link to Conversational guidelines (UX Writing)
- How to mention that a SDL AI Figma file exists for Siemens users
And some smaller stuff :)
Add a new Chat attachment usage guide (anatomy, options, behavior, states, dos/don’ts) and include a related Figma image. Refine copy across chat-related docs: AI message, Chat input, and User message (clarify wording and responsiveness). Update sidebars labels for chat and chat-attachment, and update/add several Figma static images.
removed the deeplink to the icon until we know how to do them
flxlst09
left a comment
flxlst09
left a comment
There was a problem hiding this comment.
Reviewed the md, preview deployment did not work. Only smaller stuff, good to go once addressed
tokyojen
left a comment
tokyojen
left a comment
There was a problem hiding this comment.
Added quite a lot of comments to try to make sure it matches with Sidhu and our content. Might need to check a few things together.
|
|
||
| # AI message - Usage | ||
|
|
||
| AI messages display a single assistant response inside a conversational thread. We recommend using them for answers users need to read, review and act on. |
There was a problem hiding this comment.
| AI messages display a single assistant response inside a conversational thread. We recommend using them for answers users need to read, review and act on. | |
| AI messages display individual responses from the AI (agent, bot, Copilot, etc.) inside a conversational thread once the prompt input field has been completed and sent by the user. |
Question: is the component for the prompt input field the same as the message component?
|
|
||
| ## Options | ||
|
|
||
| - **Content:** Keep the response easy to scan. We usually structure longer answers with a short lead sentence followed by lists, short paragraphs or other lightweight content blocks. |
There was a problem hiding this comment.
This is recommended but we have no control over the format of the response. Instead here you should say what the font type and font size is. And the font color as we can control this. If we have this info and if suitable here. If you want to give recommendations about AI behavior feedback you can refer to: https://ix.siemens.io/docs/guidelines/conversational-design/designing-conversations/overview
| ## Options | ||
|
|
||
| - **Content:** Keep the response easy to scan. We usually structure longer answers with a short lead sentence followed by lists, short paragraphs or other lightweight content blocks. | ||
| - **Actions:** Add only message-level actions that users expect after reading, e.g. copy, rate response quality or regenerate. We recommend using subtle tertiary [icon buttons](../icon-button) so actions stay available without competing with the answer. |
There was a problem hiding this comment.
Question: Is regenerate usually within this component?
Please refer to the AI terminology Figma file for wording with action icons: https://www.figma.com/design/lqjt9c5IzzwQ4eJ4nqG7Kv/AI-Terminology?node-id=1-9&t=d5UkOPKJfj9qDmYM-1 ONLY INTERNAL
|
|
||
| - **Content:** Keep the response easy to scan. We usually structure longer answers with a short lead sentence followed by lists, short paragraphs or other lightweight content blocks. | ||
| - **Actions:** Add only message-level actions that users expect after reading, e.g. copy, rate response quality or regenerate. We recommend using subtle tertiary [icon buttons](../icon-button) so actions stay available without competing with the answer. | ||
| - **Sources:** If the response is grounded in files, web results or internal data, expose that provenance close to the message content, e.g. with [chips](../chip). Only show sources when they are real and inspectable. |
There was a problem hiding this comment.
There are two kinds of resources - inline and also under the message box. Do we want to talk about both? I think both use chips. Need to check.
Also note "Only show sources when they are real and inspectable." - this must be removed as it is not possible to control.
| - **Sources:** If the response is grounded in files, web results or internal data, expose that provenance close to the message content, e.g. with [chips](../chip). Only show sources when they are real and inspectable. | |
| - **Sources:** Display all sources after the AI message response within the message box with [chips](../chip). |
|
|
||
| ## Behavior in context | ||
|
|
||
| - **Responsiveness:** AI messages use from 45 to 80 % of the chat's container width, depending on the viewport width. |
There was a problem hiding this comment.
| - **Responsiveness:** AI messages use from 45 to 80 % of the chat's container width, depending on the viewport width. | |
| - **Responsiveness:** AI messages use from 45 to 80% of the chat's container width, depending on the viewport width. |
| ## Behavior in context | ||
|
|
||
| - **Interaction:** User messages keep the submitted prompt visible as the main record of what users asked. | ||
| - **Actions:** Message actions are only shown when users hover over the message with a mouse, tap the message on touch devices or reach the message with the `Tab` key. |
There was a problem hiding this comment.
the hover text and action labels are available here: https://www.figma.com/design/lqjt9c5IzzwQ4eJ4nqG7Kv/AI-Terminology?node-id=1-9&t=8g9VIGSar5B6wwtC-1
| - **Interaction:** User messages keep the submitted prompt visible as the main record of what users asked. | ||
| - **Actions:** Message actions are only shown when users hover over the message with a mouse, tap the message on touch devices or reach the message with the `Tab` key. | ||
| - **Placement:** User messages are always placed on the right side of the [chat](../chat/) to visually distinguish them from [AI messages](../ai-message) on the left side. | ||
| - **Responsiveness:** User messages take from 45 to 80 % of the chat's container width, depending on the viewport width. |
There was a problem hiding this comment.
| - **Responsiveness:** User messages take from 45 to 80 % of the chat's container width, depending on the viewport width. | |
| - **Responsiveness:** User messages take from 45 to 80% of the chat's container width, depending on the viewport width. |
|
|
||
| ## Dos and Don’ts | ||
|
|
||
| - Do offer only the few actions users need after sending, e.g. copy, edit or more actions |
There was a problem hiding this comment.
| - Do offer only the few actions users need after sending, e.g. copy, edit or more actions | |
| - Do offer only the few actions users need after sending, e.g. copy or edit |
| ## Dos and Don’ts | ||
|
|
||
| - Do offer only the few actions users need after sending, e.g. copy, edit or more actions | ||
| - Do keep the original message wording and attachments visible so users can review what they submitted |
There was a problem hiding this comment.
| - Do keep the original message wording and attachments visible so users can review what they submitted | |
| - Do keep the messages and attachments visible as a continuous chat |
|
|
||
| - Do offer only the few actions users need after sending, e.g. copy, edit or more actions | ||
| - Do keep the original message wording and attachments visible so users can review what they submitted | ||
|
|
There was a problem hiding this comment.
Maybe an idea for a dont:
"Don't add limits to how many messages are visible, instead always display full chat sessions"
tokyojen
left a comment
tokyojen
left a comment
There was a problem hiding this comment.
Added quite a lot of comments to try to make sure it matches with Sidhu and our content. Might need to check a few things together.
4 participants
💡 What is the current behavior?
Jira: IX-4307 and IX-4410
🆕 What is the new behavior?
Implementation is here: siemens/ix#2569
👨💻 Help & support