feat(ai): add mermaid support to markdown (#780)

* feat(ai): add mermaid support to markdown

* Update extensions/github1s-ai/src/webview/components/Markdown.ts

Co-authored-by: Siddhant Khare <Siddhantkhare2694@gmail.com>

* Update extensions/github1s-ai/src/webview/components/Markdown.ts

Co-authored-by: Siddhant Khare <Siddhantkhare2694@gmail.com>

* fix(ai): stabilize Mermaid rendering

* fix(ai): sync Mermaid toggle with the visible view

- Derive the toggle label from what is shown, disable it while a
  render is pending, and reset the selection when rendering fails so
  the next click retries.
- Debounce re-renders while the source of an open diagram is still
  streaming, which avoids flicker and a render per token.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Siddhant Khare <Siddhantkhare2694@gmail.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: 3 people

extensions/github1s-ai/assets/chat.css

@@ -875,7 +875,7 @@ summary:focus-visible,
 	min-height: 27px;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
+	gap: 2px;
 	padding: 0 5px 0 9px;
 	color: var(--vscode-descriptionForeground);
 	background: var(--vscode-editorGroupHeader-tabsBackground, transparent);
@@ -889,8 +889,8 @@ summary:focus-visible,
 	white-space: nowrap;
 }
 
-.code-copy {
-	min-width: 42px;
+.code-block-header button {
+	min-width: 24px;
 	padding: 2px 5px;
 	color: inherit;
 	background: transparent;
@@ -899,18 +899,35 @@ summary:focus-visible,
 	font-size: inherit;
 }
 
-.code-copy:hover {
+.code-block-header button:hover {
 	color: var(--vscode-foreground);
 	background: var(--vscode-toolbar-hoverBackground, var(--vscode-list-hoverBackground));
 }
 
-.code-block pre {
+.code-block pre,
+.mermaid-diagram {
 	max-height: 480px;
 	margin: 0;
 	overflow: auto;
 	padding: 10px 11px;
 }
 
+.mermaid-diagram {
+	box-sizing: border-box;
+}
+
+.mermaid-diagram > svg {
+	display: block;
+	height: auto;
+	margin: 0 auto;
+}
+
+.mermaid-controls {
+	display: flex;
+	gap: inherit;
+	margin-left: auto;
+}
+
 .code-block code {
 	display: block;
 	min-width: max-content;