feat: fix markdown rendering, UI adjustments

studio/frontend/src/components/assistant-ui/markdown-text.tsx

@@ -1,20 +1,30 @@
 "use client";
 
-import { INTERNAL } from "@assistant-ui/react";
-import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
+import { INTERNAL, useMessagePartText } from "@assistant-ui/react";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
 import "katex/dist/katex.min.css";
 
-const { withSmoothContextProvider } = INTERNAL;
+const { withSmoothContextProvider, useSmoothStatus } = INTERNAL;
 
 const MarkdownTextImpl = () => {
+  const { text } = useMessagePartText();
+  const status = useSmoothStatus();
+
   return (
-    <StreamdownTextPrimitive
-      plugins={{ code, math, mermaid }}
-      controls={true}
-    />
+    <div data-status={status.type}>
+      <Streamdown
+        mode="streaming"
+        isAnimating={status.type === "running"}
+        plugins={{ code, math, mermaid }}
+        controls={true}
+        shikiTheme={["github-light", "github-dark"]}
+      >
+        {text}
+      </Streamdown>
+    </div>
   );
 };
 

studio/frontend/src/components/assistant-ui/thread.tsx

@@ -70,7 +70,7 @@ export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({
           }}
         />
 
-        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mt-auto flex w-full flex-col gap-4 overflow-visible bg-background pb-4 md:pb-4 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-full before:h-20 before:bg-gradient-to-t before:from-background before:to-transparent">
+        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mt-auto flex w-full flex-col gap-4 overflow-visible bg-background pb-4 md:pb-4">
           <ThreadScrollToBottom />
           <AuiIf condition={({ thread }) => !thread.isEmpty}>
             {!hideComposer && <ComposerAnimated />}

studio/frontend/src/features/chat/chat-page.tsx

@@ -208,7 +208,7 @@ function InlineSidebar({
 
   return (
     <div
-      className="group shrink-0 h-full"
+      className="group shrink-0 h-full pb-3.5"
       data-state={state}
       data-collapsible={collapsed ? "offcanvas" : ""}
       data-side={side}

studio/frontend/src/features/chat/chat-settings-sheet.tsx

@@ -195,7 +195,7 @@ export function ChatSettingsPanel({
 
   return (
     <aside
-      className={`shrink-0 h-full overflow-hidden bg-muted/70 rounded-2xl corner-squircle transition-[width] duration-200 ease-linear ${open ? "w-[17rem] border-l border-sidebar-border/70" : "w-0"}`}
+      className={`shrink-0 self-start h-[calc(100%-0.875rem)] overflow-hidden bg-muted/70 rounded-2xl corner-squircle transition-[width] duration-200 ease-linear ${open ? "w-[17rem] border-l border-sidebar-border/70" : "w-0"}`}
     >
       <div className="flex h-full w-[17rem] flex-col">
         <div className="flex items-center gap-2 px-4 py-3">

studio/frontend/src/index.css

@@ -1,11 +1,13 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import "streamdown/styles.css";
 @import "@fontsource-variable/figtree";
 @import "@fontsource-variable/space-grotesk";
 @import "@fontsource-variable/inter";
 @import "tw-shimmer";
 @plugin "@toolwind/corner-shape";
+@source "../node_modules/streamdown/dist/*.js";
 
 @font-face {
   font-family: "Hellix";
@@ -363,4 +365,4 @@
 ::view-transition-old(root), ::view-transition-new(root) {
     animation: none;
     mix-blend-mode: normal;
-}
+}