feat: restyle chat playground to the design system#75
Merged
Conversation
The playground was built with stock Tailwind utilities (slate/emerald/ amber boxes) and looked like a different app dropped into the site's editorial paper/ink design. styles.css already carried a purpose-built chat design (.chat-banner, .chat-body, .msg, .chat-input) that the components never used. Rewire all four components to those classes: - MessageBubble: editorial .msg grid — mono speaker label, serif user text, sans assistant text, ink code blocks. - ChatPlayground: ink banner, editorial AI-disclaimer footnote, the empty state and seed prompts restyled. - PromptInput: paper input dock; the send button becomes a stop button while streaming. min-width:0 on the textarea keeps mobile intact. - ParamsPanel: mono labels, rule borders, accent-blue controls. User-facing copy is now French, consistent with the rest of the site.
There was a problem hiding this comment.
Pull request overview
This PR restyles the public chat playground to match the existing “papier/encre” design system already present in styles.css, replacing the generic Tailwind look and aligning visible UI text to French. It updates the main chat components (messages, banner/body layout, prompt input, and params panel) plus associated tests and CSS utilities.
Changes:
- Rewire
ChatPlayground,MessageBubble,PromptInput, andParamsPanelto design-system classes (.chat-banner,.chat-body,.msg,.chat-input*,.chat-params*, etc.). - Update the input dock UX (attachments pill + send/stop button behavior during streaming) and empty-state prompts.
- Update component tests to match the new French placeholders/labels and payload text.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/cockpit-public/tests/components/PromptInput.test.tsx | Updates test selectors/assertions to match new French UI strings and payload text. |
| apps/cockpit-public/tests/components/ChatPlayground.test.tsx | Updates ParamsPanel toggle lookup to match the new French label. |
| apps/cockpit-public/src/styles.css | Adds/extends design-system chat classes (note, params panel, empty state, thinking indicator, errors, input dock, attachment pill). |
| apps/cockpit-public/src/components/ChatPlayground/PromptInput.tsx | Restyles input/attachment UI, adds streaming stop button behavior, and translates user-facing strings to French. |
| apps/cockpit-public/src/components/ChatPlayground/ParamsPanel.tsx | Restyles params panel and translates labels to French, replacing icon chevrons with a textual caret. |
| apps/cockpit-public/src/components/ChatPlayground/MessageBubble.tsx | Switches message rendering to the .msg editorial layout and updates thinking/stream cursor UI. |
| apps/cockpit-public/src/components/ChatPlayground/ChatPlayground.tsx | Replaces Tailwind layout with banner/note/body structure, updates empty state + error styling, and wires streaming stop into PromptInput. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+80
to
+86
| <div className="chat-banner"> | ||
| <span className="live"> | ||
| <span className="dot" /> | ||
| {modelDisplayName} | ||
| </span> | ||
| <span>SSE streaming</span> | ||
| </div> |
| {streaming ? ( | ||
| <button | ||
| type="button" | ||
| onClick={onStop} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Contexte
Le playground de chat était bâti en Tailwind générique (boîtes slate/emerald/ambre) et ressemblait à une autre application posée dans le site « document souverain × console » (papier/encre, bleu EU, serif). Or
styles.csscontenait déjà un design de chat soigné et inutilisé :.chat-banner,.chat-body,.msg,.chat-input.C'est la cause de fond du « c'est très moche » — la PR #74 avait corrigé la casse mobile ; celle-ci traite l'esthétique.
Changement — recâblage des 4 composants sur le design system
MessageBubble→ grille éditoriale.msg: label locuteur en mono capitales, message user en serif, assistant en sans, blocs de code sur fond encre. Fini les bulles emerald/slate.ChatPlayground→ bannière.chat-banner(encre), avertissement IA en note éditoriale (filet--warn, plus la boîte ambre), état vide + prompts d'exemple restylés.PromptInput→ dock de saisie papier ; le bouton d'envoi devient un bouton stop pendant le streaming.min-width:0sur le textarea conserve le correctif mobile de fix: repair chat playground mobile layout #74.ParamsPanel→ libellés mono, filets--rule, contrôles accent bleu.Le texte visible passe en français, cohérent avec le reste du site (le playground était en anglais).
styles.css: ajout des classes manquantes (.chat-note,.chat-params*,.chat-empty*,.chat-thinking,.chat-error,.chat-input-wrap,.chat-icon-btn,.chat-send,.chat-stop,.chat-attach*) — toutes en tokens du design system.Vérification
biome check+tsc --noEmitOK ·vitest16/16 (testsPromptInput/ChatPlaygroundmis à jour pour le composant contrôlé + les libellés FR).docScrollW=375, zéro débordement..msgseront vérifiées sur prod après déploiement (l'envoi de message est un fetch client vers/api/public/chat, non servi en local).