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 skippedDraft detected. 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.
|
|
||
| ## 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
|
|
||
| - **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). |
There was a problem hiding this comment.
Here it's only about the ones under the message box since it is an actual option to enable.
Sources get inspectable by simply adding them to the list - if there is no list, the sources chip makes no sense to show.
For the "real"-part we can discuss 😂 even though I think the bot is only references that we (app builders) feed them, so eventually we're in charge of available sources, arent' we? 🤔
For inline usage there's currently no official component in place, since the official (internal) guideline suggested a chip with less than 24px height (-> hit area too small).
There was a problem hiding this comment.
Decision: find a better wording for inspectable
| ## 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
There was a problem hiding this comment.
Technically, there's no "hover text". Is it an aria-label? A tooltip? Title? - in every case, we need to add these recommendations to the options section
Also, is this available open source (=text recommendations can be added to this markdown) or inner source (in gitlab)? - in this Figma, it's really difficult to find them
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.
Co-authored-by: tokyojen <143795032+tokyojen@users.noreply.github.com>
Editorial updates to chat-related documentation to improve clarity and consistency. Changes include: refine AI message guidance (use ‘generating responses’ wording, link to wording guidelines, limit actions to 4, note thumbs feedback alignment), correct chat-attachment code tab description, clarify chat-attachment usage link to user-message and fix formatting, update chat-input guidance (placeholder punctuation, move/clarify disclaimer guidance with Siemens link, image alt text), and restructure chat guide (restore Dos/Don’ts, reword descriptions, recommend auto-scroll behavior, and advise against limiting visible messages). These are non-functional content updates to improve UX and legal/consistency guidance across docs.
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