feat(ui): add language icons and smart query headings

[Rifatul-Islam-Munna]

Enhances message readability by introducing language icons for code blocks and a collapsible smart query heading component.

• Adds @devicon/react dependency and icon mapping utility
• Implements collapsible SmartQueryHeading for message queries
• Updates CodeBlock to dynamically render language-specific icons
• Prevents horizontal overflow in the main layout container

---

Summary by cubic

Adds language icons to code blocks and a collapsible query heading to make messages easier to scan. Also stops horizontal scrolling in the main layout.

• New Features

  • Code blocks show language icons and a floating header with a copy button when scrolled (via @devicon/react with lazy-loaded mapping).
  • Added SmartQueryHeading that auto-adjusts text size and supports expand/collapse for long queries.

• Bug Fixes

  • Prevented horizontal overflow by adding overflow-x-hidden to the main layout.

^{Written for commit 074439e. Summary will update on new commits.}

[Rifatul-Islam-Munna]

[cubic-dev-ai]

4 issues found across 8 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/MessageRenderer/CodeBlock/index.tsx">

<violation number="1" location="src/components/MessageRenderer/CodeBlock/index.tsx:17">
P2: LangIcon does not clear icon state when the new language has no mapped loader, so a previous icon can be shown incorrectly.</violation>

<violation number="2" location="src/components/MessageRenderer/CodeBlock/index.tsx:80">
P2: Copy success is shown before clipboard write succeeds, and Promise rejection from `writeText` is not handled.</violation>
</file>

<file name="src/components/SmartQueryHeading.tsx">

<violation number="1" location="src/components/SmartQueryHeading.tsx:21">
P2: Line-count measurement is based on a fixed-width approximation and only recomputed on query changes, causing stale/mismatched wrapping on responsive layout changes.</violation>

<violation number="2" location="src/components/SmartQueryHeading.tsx:61">
P2: Expanded state is still height-capped at 600px, so long headings can remain truncated even after “Show more.”</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Add one-off context when rerunning by tagging @cubic-dev-ai with guidance or docs links (including llms.txt)
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: LangIcon does not clear icon state when the new language has no mapped loader, so a previous icon can be shown incorrectly.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/components/MessageRenderer/CodeBlock/index.tsx, line 17:

<comment>LangIcon does not clear icon state when the new language has no mapped loader, so a previous icon can be shown incorrectly.</comment>

<file context>
@@ -1,11 +1,27 @@
+
+  useEffect(() => {
+    const loader = langIconMap[language?.toLowerCase()];
+    if (loader) {
+      loader().then((mod) => setIcon(() => mod.default)).catch(() => setIcon(null));
+    }
</file context>

Suggested change

	if (loader) {
	loader().then((mod) => setIcon(() => mod.default)).catch(() => setIcon(null));
	}
	if (loader) {
	loader().then((mod) => setIcon(() => mod.default)).catch(() => setIcon(null));
	} else {
	setIcon(null);
	}

[cubic-dev-ai]

P2: Copy success is shown before clipboard write succeeds, and Promise rejection from writeText is not handled.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/components/MessageRenderer/CodeBlock/index.tsx, line 80:

<comment>Copy success is shown before clipboard write succeeds, and Promise rejection from `writeText` is not handled.</comment>

<file context>
@@ -16,47 +32,116 @@ const CodeBlock = ({
+  const showFloat = mounted && !headerVisible && blockVisible;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(children as string);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
</file context>

[cubic-dev-ai]

P2: Line-count measurement is based on a fixed-width approximation and only recomputed on query changes, causing stale/mismatched wrapping on responsive layout changes.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/components/SmartQueryHeading.tsx, line 21:

<comment>Line-count measurement is based on a fixed-width approximation and only recomputed on query changes, causing stale/mismatched wrapping on responsive layout changes.</comment>

<file context>
@@ -0,0 +1,101 @@
+    const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+    const lines = Math.ceil(el.scrollHeight / lineHeight);
+    setLineCount(lines);
+  }, [query]);
+
+  useEffect(() => {
</file context>

[cubic-dev-ai]

P2: Expanded state is still height-capped at 600px, so long headings can remain truncated even after “Show more.”

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/components/SmartQueryHeading.tsx, line 61:

<comment>Expanded state is still height-capped at 600px, so long headings can remain truncated even after “Show more.”</comment>

<file context>
@@ -0,0 +1,101 @@
+        <div className="relative">
+          <div
+            className={`transition-[max-height] duration-300 ease-in-out overflow-hidden ${
+              needsExpand && !isExpanded ? 'max-h-[5.5rem]' : 'max-h-[600px]'
+            }`}
+          >
</file context>