[NEB-170] Nebula: Various UI changes (#6747)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the user interface and experience of the `Nebula` app by updating text content, adjusting styles, and introducing a new `StyledMarkdownRenderer` component for better message rendering.

### Detailed summary
- Updated text in `EmptyStateChatPageContent.tsx` and `ContextFilters.tsx` to reflect new terminology.
- Changed section headings from `Context` to `Settings`.
- Improved styling for various components, including `ChatSidebarLink` and buttons.
- Introduced `StyledMarkdownRenderer` for consistent message formatting.
- Adjusted scrollbar styles in `global.css`.
- Modified button states and classes for better responsiveness and appearance.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -463,9 +463,11 @@ export function ChatPageContent(props: {
         </div>
         <aside className="hidden w-[360px] flex-col border-l bg-card pt-4 xl:flex">
           <div className="px-4">
-            <h3 className="font-semibold text-lg tracking-tight">Context</h3>
+            <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
+              Settings
+            </h3>
             <p className="mb-5 text-muted-foreground text-sm">
-              Provide context to Nebula for your prompts
+              Modify Nebula to suit your needs
             </p>
           </div>
           <ContextFiltersForm

apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx

@@ -1,15 +1,8 @@
 "use client";
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  FileCode2Icon,
-  MessageSquareShareIcon,
-  MessagesSquareIcon,
-  SquareDashedBottomCodeIcon,
-  TextIcon,
-} from "lucide-react";
+import { ChevronRightIcon, FileCode2Icon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import type { TruncatedSessionInfo } from "../api/types";
 import { useNewChatPageLink } from "../hooks/useNewChatPageLink";
@@ -29,54 +22,47 @@ export function ChatSidebar(props: {
   const newChatPage = useNewChatPageLink();
 
   return (
-    <div className="flex h-full flex-col p-2">
-      <div className="flex items-center justify-start gap-3 p-2 lg:justify-between">
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-start gap-3 p-4 lg:justify-between">
         <Link href="/" className="flex items-center gap-2">
           <NebulaIcon className="size-8 text-foreground" aria-label="Nebula" />
-          <span className="font-semibold text-lg tracking-tight">
-            Playground
-          </span>
+          <span className="font-semibold text-lg tracking-tight">Nebula</span>
         </Link>
 
         <Badge variant="secondary" className="gap-1 py-1">
-          Alpha
+          Beta
         </Badge>
       </div>
 
-      <div className="h-4" />
+      <div className="h-1" />
 
-      <div className="flex flex-col gap-2 px-2">
+      <div className="flex flex-col gap-2 px-4">
         <Button asChild variant="outline" className="w-full gap-2 rounded-lg">
-          <Link href={newChatPage}>New Chat</Link>
+          <Link href={newChatPage}>
+            <PlusIcon className="size-4" />
+            New Chat
+          </Link>
         </Button>
       </div>
 
-      <div className="h-3" />
-
-      <SidebarIconLink
-        href="https://portal.thirdweb.com/nebula/api-reference"
-        icon={FileCode2Icon}
-        label="API Reference"
-        target="_blank"
-      />
-
-      <SidebarIconLink
-        href="/chat/history"
-        icon={MessagesSquareIcon}
-        label="All Chats"
-      />
+      <div className="h-5" />
 
       {sessionsToShow.length > 0 && (
-        <ScrollShadow
-          className="my-3 flex-1 border-t border-dashed pt-2"
-          scrollableClassName="max-h-full"
-          shadowColor="transparent"
-          shadowClassName="z-10"
-        >
+        <div className="flex-1 overflow-auto border-t border-dashed p-2 pt-2">
+          <div className="flex items-center justify-between px-2 py-3">
+            <h3 className="text-muted-foreground text-xs">Recent Chats</h3>
+            {sessionsToShow.length < sessions.length && (
+              <Link
+                href="/chat/history"
+                className="flex items-center gap-1 rounded-full text-foreground text-xs hover:underline"
+              >
+                View All
+                <ChevronRightIcon className="size-3.5 text-muted-foreground" />
+              </Link>
+            )}
+          </div>
+
           <div className="flex flex-col gap-1">
-            <h3 className="px-2 py-3 text-muted-foreground text-xs">
-              Recent Chats
-            </h3>
             {sessionsToShow.map((session) => {
               return (
                 <ChatSidebarLink
@@ -88,27 +74,13 @@ export function ChatSidebar(props: {
               );
             })}
           </div>
-        </ScrollShadow>
+        </div>
       )}
 
-      <div className="mb-3 border-y border-dashed py-3">
-        <SidebarIconLink
-          href="https://docs.google.com/forms/d/e/1FAIpQLSeM3fJRyywihRZUF1fiTNKEpJ_AzAcohRwXPpLr_3zxQ6W-tg/viewform?usp=sharing"
-          icon={MessageSquareShareIcon}
-          label="Take our quick survey!"
-          target="_blank"
-        />
-
-        <SidebarIconLink
-          href="https://portal.thirdweb.com/changelog"
-          icon={TextIcon}
-          label="Changelog"
-          target="_blank"
-        />
-
+      <div className="mb-3 border-y border-dashed px-2 py-3">
         <SidebarIconLink
           href="https://portal.thirdweb.com/nebula"
-          icon={SquareDashedBottomCodeIcon}
+          icon={FileCode2Icon}
           label="Documentation"
           target="_blank"
         />
@@ -130,13 +102,12 @@ function SidebarIconLink(props: {
   href: string;
 }) {
   return (
-    <Button asChild variant="ghost">
-      <Link
-        href={props.href}
-        target={props.target}
-        className="!justify-start !px-3 w-full gap-2.5 rounded-lg text-left"
-        prefetch={false}
-      >
+    <Button
+      asChild
+      variant="ghost"
+      className="h-auto w-full justify-start gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm"
+    >
+      <Link href={props.href} target={props.target} prefetch={false}>
         <props.icon className="size-4" />
         {props.label}
       </Link>

apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx

@@ -52,7 +52,7 @@ export function ChatSidebarLink(props: {
       <Button
         asChild
         variant="ghost"
-        className="!h-auto !w-full items-center justify-between px-2 text-left text-sm hover:bg-transparent"
+        className="h-auto w-full items-center justify-between px-2 py-1.5 text-left text-sm hover:bg-transparent"
       >
         <NavLink href={`/chat/${props.sessionId}`} activeClassName="bg-muted">
           <span className="line-clamp-1 block truncate">{props.title}</span>
@@ -61,7 +61,7 @@ export function ChatSidebarLink(props: {
       <Popover>
         <PopoverTrigger asChild>
           <Button
-            className="-translate-y-1/2 !bg-background absolute top-1/2 right-1 z-10 h-auto w-auto p-1.5 opacity-0 group-hover:opacity-100"
+            className="-translate-y-1/2 absolute top-1/2 right-1 z-10 h-auto w-auto bg-accent p-1 opacity-0 hover:bg-zinc-300 group-hover:opacity-100 dark:hover:bg-zinc-700"
             variant="ghost"
           >
             <EllipsisIcon className="size-4" />

apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx

@@ -117,17 +117,9 @@ export function Chats(props: {
                   {message.type === "user" ? (
                     <div className="mt-6 flex justify-end">
                       <div className="max-w-[80%] overflow-auto rounded-xl border bg-card px-4 py-2">
-                        <MarkdownRenderer
-                          skipHtml
-                          markdownText={message.text}
-                          code={{
-                            ignoreFormattingErrors: true,
-                            className: "bg-transparent",
-                          }}
-                          className="text-foreground [&>*:last-child]:mb-0"
-                          p={{ className: "text-foreground leading-normal" }}
-                          li={{ className: "text-foreground" }}
-                          inlineCode={{ className: "border-none" }}
+                        <StyledMarkdownRenderer
+                          text={message.text}
+                          isMessagePending={isMessagePending}
                         />
                       </div>
                     </div>
@@ -161,18 +153,9 @@ export function Chats(props: {
                       <div className="min-w-0 grow">
                         <ScrollShadow className="rounded-lg">
                           {message.type === "assistant" ? (
-                            <MarkdownRenderer
-                              skipHtml
-                              markdownText={message.text}
-                              code={{
-                                disableCodeHighlight: isMessagePending,
-                                ignoreFormattingErrors: true,
-                              }}
-                              className="text-foreground [&>*:last-child]:mb-0"
-                              p={{
-                                className: "text-foreground",
-                              }}
-                              li={{ className: "text-foreground" }}
+                            <StyledMarkdownRenderer
+                              text={message.text}
+                              isMessagePending={isMessagePending}
                             />
                           ) : message.type === "error" ? (
                             <div className="rounded-xl border bg-card px-4 py-2 text-destructive-text leading-normal">
@@ -332,3 +315,23 @@ function MessageActions(props: {
     </div>
   );
 }
+
+function StyledMarkdownRenderer(props: {
+  text: string;
+  isMessagePending: boolean;
+}) {
+  return (
+    <MarkdownRenderer
+      skipHtml
+      markdownText={props.text}
+      className="text-foreground [&>*:first-child]:mt-0 [&>*:first-child]:border-none [&>*:first-child]:pb-0 [&>*:last-child]:mb-0"
+      code={{
+        ignoreFormattingErrors: true,
+        className: "bg-transparent",
+      }}
+      p={{ className: "text-foreground leading-normal" }}
+      li={{ className: "text-foreground" }}
+      inlineCode={{ className: "border-none" }}
+    />
+  );
+}

apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx

@@ -66,9 +66,9 @@ export default function ContextFiltersButton(props: {
       </DialogTrigger>
       <DialogContent className="overflow-hidden p-0">
         <DialogHeader className="px-6 pt-6 pb-1">
-          <DialogTitle className="font-semibold text-xl">Context</DialogTitle>
+          <DialogTitle className="font-semibold text-xl">Settings</DialogTitle>
           <DialogDescription className="text-muted-foreground">
-            Provide context to Nebula for your prompts
+            Modify Nebula to suit your needs
           </DialogDescription>
         </DialogHeader>
 
@@ -198,7 +198,9 @@ export function ContextFiltersForm(props: {
                       .filter(Boolean)
                       .map(Number)}
                     onChange={(values) => {
-                      form.setValue("chainIds", values.join(","));
+                      form.setValue("chainIds", values.join(","), {
+                        shouldDirty: true,
+                      });
                     }}
                     priorityChains={[
                       1, // ethereum
@@ -251,13 +253,20 @@ export function ContextFiltersForm(props: {
             </DialogClose>
           )}
           <Button
-            className="min-w-24 gap-2"
+            className="min-w-24 gap-2 disabled:text-muted-foreground disabled:opacity-100"
             type="submit"
             size="sm"
-            disabled={updateMutation.isPending}
+            variant={
+              props.modal
+                ? "default"
+                : form.formState.isDirty
+                  ? "default"
+                  : "outline"
+            }
+            disabled={updateMutation.isPending || !form.formState.isDirty}
           >
             {updateMutation.isPending && <Spinner className="size-4" />}
-            Update Context
+            Save
           </Button>
         </div>
       </form>

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx

@@ -23,8 +23,7 @@ export function EmptyStateChatPageContent(props: {
         </div>
         <div className="h-5" />
         <h1 className="px-4 text-center font-semibold text-3xl tracking-tight md:text-4xl">
-          How can I help you <br className="max-sm:hidden" />
-          with the blockchain today?
+          How can I help you <br /> onchain today?
         </h1>
         <div className="h-5" />
         <div className="mx-auto max-w-[600px]">

apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx

@@ -49,7 +49,7 @@ export const MarkdownRenderer: React.FC<{
             <h2
               className={cn(
                 commonHeadingClassName,
-                "mb-4 border-border border-b text-3xl",
+                "mb-3 border-border border-b text-xl md:text-2xl",
               )}
               {...cleanedProps(props)}
             />
@@ -60,15 +60,18 @@ export const MarkdownRenderer: React.FC<{
               {...cleanedProps(props)}
               className={cn(
                 commonHeadingClassName,
-                "mt-8 mb-4 border-border border-b text-2xl",
+                "mt-8 mb-3 border-border border-b text-lg md:text-xl",
               )}
             />
           ),
 
           h3: (props) => (
             <h4
               {...cleanedProps(props)}
-              className={cn(commonHeadingClassName, "mt-4 text-xl")}
+              className={cn(
+                commonHeadingClassName,
+                "mt-4 text-base md:text-lg",
+              )}
             />
           ),
 
@@ -198,9 +201,7 @@ export const MarkdownRenderer: React.FC<{
             </li>
           ),
           strong(props) {
-            return (
-              <strong className="font-semibold" {...cleanedProps(props)} />
-            );
+            return <strong className="font-medium" {...cleanedProps(props)} />;
           },
         }}
       >

apps/dashboard/src/global.css

@@ -200,3 +200,8 @@ body {
   --chakra-zIndices-overlay: 50;
   --chakra-colors-chakra-border-color: hsl(var(--border));
 }
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted)) transparent;
+}