Merge pull request #4 from e2b-dev/add-github-repo-banner-for-tractio…

…n-e2b-1466 Add "Star on GitHub" banner in navbar
e2b-dev · Jan 23, 2025 · cb56680 · cb56680
2 parents de758c3 + cf208f1
commit cb56680
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 69 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,7 +6,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html
+      lang="en"
+      className="scrollbar-track-transparent scrollbar-thumb-foreground/10"
+    >
       <body>{children}</body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,6 @@
 "use client";
+
+import { RepoBanner } from "@/components/repo-banner";
 import { useChat } from "ai/react";
 import { MessageComponent } from "@/components/message";
 import { FileText, PlayIcon, PlusIcon, X } from "lucide-react";
@@ -116,8 +118,8 @@ export default function Home() {
 
   return (
     <div className="flex flex-col min-h-screen max-h-screen">
-      <nav className="flex gap-0.5 justify-between items-center p-4 top-0 fixed left-0 right-0 bg-white/80 backdrop-blur-sm shadow-sm z-10">
-        <div className="flex items-center gap-2">
+      <nav className="flex gap-0.5 justify-between items-center px-4 py-3 top-0 fixed left-0 right-0 bg-white/80 backdrop-blur-sm shadow-sm z-10">
+        <div className="flex items-center gap-2 w-full max-w-2xl mx-auto">
           <Logo className="w-6 h-6" />
           <h1 className="text-md font-medium">
             Analyst by{" "}
@@ -129,8 +131,10 @@ export default function Home() {
               E2B
             </a>
           </h1>
+          <RepoBanner />
         </div>
       </nav>
+
       <div className="flex-1 overflow-y-auto pt-14" id="messages">
         {messages.map((m) => (
           <MessageComponent key={m.id} message={m} />
@@ -140,6 +144,19 @@ export default function Home() {
       <div className="mb-4 mx-4">
         <div className="mx-auto w-full max-w-2xl flex flex-col gap-2">
           <div className="flex gap-2 overflow-x-auto">
+            {messages.length === 0 && files.length === 0 && (
+              <div className="flex gap-2 overflow-x-auto scrollbar-thin pb-1 pr-4 [mask-image:linear-gradient(to_right,transparent,black_0%,black_95%,transparent)]">
+                {exampleMessages.map((msg) => (
+                  <button
+                    key={msg}
+                    className="flex items-center gap-2 p-1.5 border rounded-lg text-gray-800"
+                    onClick={() => setInput(msg)}
+                  >
+                    <span className="text-sm truncate">{msg}</span>
+                  </button>
+                ))}
+              </div>
+            )}
             {files.map((file) => (
               <div
                 key={file.name}
@@ -158,19 +175,7 @@ export default function Home() {
               </div>
             ))}
           </div>
-          {messages.length === 0 && files.length === 0 && (
-            <div className="flex gap-2 overflow-x-auto">
-              {exampleMessages.map((msg) => (
-                <button
-                  key={msg}
-                  className="flex items-center gap-2 p-1.5 border rounded-lg text-gray-800"
-                  onClick={() => setInput(msg)}
-                >
-                  <span className="text-sm truncate">{msg}</span>
-                </button>
-              ))}
-            </div>
-          )}
+
           <div className="flex gap-2 justify-between items-end">
             <div className="flex gap-2">
               <LLMPicker
@@ -191,7 +196,7 @@ export default function Home() {
           </div>
           <form
             onSubmit={customSubmit}
-            className="flex border p-1 border-1.5 border-orange-400 rounded-xl overflow-hidden shadow-md"
+            className="flex border p-2 border-1.5 border-border rounded-xl overflow-hidden shadow-sm"
           >
             <input
               type="file"

diff --git a/components/icons.tsx b/components/icons.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+interface IconProps {
+  className?: string;
+}
+
+export const GitHubIcon = ({ className }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 496 512"
+    fill="currentColor"
+    className={cn("w-4 h-4", className)}
+  >
+    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+  </svg>
+);
diff --git a/components/repo-banner.tsx b/components/repo-banner.tsx
@@ -0,0 +1,43 @@
+import { GitHubIcon } from "./icons";
+import { Separator } from "./ui/separator";
+import { cn } from "@/lib/utils";
+import { StarFilledIcon } from "@radix-ui/react-icons";
+
+const REPO_URL = "https://github.com/e2b-dev/ai-analyst";
+
+export function RepoBanner() {
+  return (
+    <a
+      href={REPO_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`View Fragments repository on GitHub`}
+      className={cn(
+        "bg-background overflow-hidden font-light px-3 py-1.5 rounded-2xl",
+        "gap-2 w-fit flex items-center shadow-sm ml-auto border",
+        "transition-all duration-300 group relative",
+        "before:absolute before:w-full before:h-full before:bg-[radial-gradient(circle_at_50%_-50%,rgba(255,255,255,0.1),transparent_70%)] dark:before:bg-[radial-gradient(circle_at_50%_-100%,rgba(255,255,255,0.1),transparent_70%)] before:rounded-2xl before:pointer-events-none"
+      )}
+    >
+      <GitHubIcon className="w-4 h-4" aria-hidden="true" />
+      <Separator
+        orientation="vertical"
+        className="h-6 bg-[hsl(var(--border))]"
+        aria-hidden="true"
+      />
+      <p className="text-sm font-medium text-foreground tracking-wide">
+        Star on GitHub
+      </p>
+      <div
+        className="flex items-center gap-1 text-foreground/80"
+        role="status"
+        aria-live="polite"
+      >
+        <StarFilledIcon
+          className="w-4 h-4 transition-transform group-hover:text-[#e4b340] duration-200 ease-in-out"
+          aria-label="GitHub stars"
+        />
+      </div>
+    </a>
+  );
+}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "ai": "^3.4.16",
     "class-variance-authority": "^0.7.0",
@@ -30,6 +31,7 @@
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.6.1",
     "tailwind-merge": "^2.5.4",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
     "zod": "^3.23.8"