add help css to chat textarea

microsoft · Feb 24, 2025 · e60b0b1 · e60b0b1
1 parent e4803fd
commit e60b0b1
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/css/src/components/form/textarea.scss b/css/src/components/form/textarea.scss
@@ -17,6 +17,9 @@ $textarea-success-border-color: $success !default;
 
 $textarea-focus-box-shadow-size: 0 0.125rem 0 0 !default;
 
+$textarea-icon-inline-spacing: 0.375em !default;
+$textarea-icon-block-spacing: 0.1em !default;
+
 .textarea {
 	@include control;
 
@@ -145,4 +148,13 @@ $textarea-divider-radius: 0.5rem !default;
 		gap: $textarea-form-gap;
 		height: 100%;
 	}
+
+	.help {
+		display: flex;
+
+		.icon {
+			margin-inline-end: $textarea-icon-inline-spacing;
+			margin-block-start: $textarea-icon-block-spacing;
+		}
+	}
 }
diff --git a/site/src/patterns/chat.md b/site/src/patterns/chat.md
@@ -52,6 +52,60 @@ For a copilot-friendly input, with a series of buttons placed within the visual
 </div>
 ```
 
+### Error / Help message
+
+Show an error or help message for the `textarea-form` by using the `help` component. According to Copilot standard, the textarea stays outlined in blue instead of outlined in red, even if the help message is using the `danger` color.
+
+```html
+<div class="textarea-form">
+	<textarea
+		class="textarea"
+		rows="2"
+		placeholder="Ask a question or describe what you'd like to do"
+	></textarea>
+	<div class="help help-danger margin-left-xxs">
+		<span class="icon" aria-hidden="true">
+			<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+				<path
+					d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+				/>
+			</svg>
+		</span>
+		<span>Please type a message to continue</span>
+	</div>
+	<div class="textarea-form-footer">
+		<div class="textarea-form-footer-left">
+			<span class="margin-left-xxs color-text-subtle">0 / 500</span>
+		</div>
+		<div class="textarea-form-footer-right">
+			<button class="button button-clear" aria-label="Attach (non functional)">
+				<span class="icon font-size-lg">
+					<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<g>
+							<path
+								class="fill-current-color"
+								d="M4.82841 10.4848L10.4853 4.8279C11.6568 3.65633 13.5563 3.65633 14.7279 4.8279C15.8995 5.99947 15.8995 7.89897 14.7279 9.07054L8.01039 15.7881C7.4246 16.3738 6.47485 16.3738 5.88907 15.7881C5.30328 15.2023 5.30328 14.2525 5.88907 13.6667L11.8995 7.65633C12.0947 7.46106 12.0947 7.14448 11.8995 6.94922C11.7042 6.75396 11.3876 6.75396 11.1924 6.94922L5.18196 12.9596C4.20565 13.9359 4.20565 15.5189 5.18196 16.4952C6.15827 17.4715 7.74118 17.4715 8.71749 16.4952L15.435 9.77765C16.9971 8.21555 16.9971 5.68289 15.435 4.12079C13.8729 2.55869 11.3403 2.55869 9.77815 4.12079L4.1213 9.77765C3.92604 9.97291 3.92604 10.2895 4.1213 10.4848C4.31656 10.68 4.63315 10.68 4.82841 10.4848Z"
+							/>
+						</g>
+					</svg>
+				</span>
+			</button>
+			<span class="textarea-form-footer-divider" aria-hidden="true"></span>
+			<button class="button button-clear" aria-label="Send">
+				<span class="icon font-size-lg">
+					<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+						<path
+							class="fill-current-color"
+							d="M4.12775 6.9639C3.50837 5.06496 5.48618 3.36055 7.27283 4.2536L42.7565 21.9901C44.4152 22.8192 44.4152 25.1862 42.7565 26.0153L7.27283 43.7518C5.48618 44.6448 3.50837 42.9404 4.12775 41.0415L9.68537 24.0027L4.12775 6.9639ZM11.9073 25.2527L6.68995 41.2482L41.1914 24.0027L6.68995 6.75717L11.9073 22.7527H28.7502C29.4405 22.7527 30.0002 23.3123 30.0002 24.0027C30.0002 24.693 29.4405 25.2527 28.7502 25.2527H11.9073Z"
+						/>
+					</svg>
+				</span>
+			</button>
+		</div>
+	</div>
+</div>
+```
+
 ## Copilot-like chat messages
 
 To mimic a copilot chat experience, apply `message-sm`, `message-sender`, and `width-auto` to automatically fit to the width of the sender's message. For the AI responses (`message-sm`), the message will take up the full width.