disable attachments and update sidebar

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

fixing package.json

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

moving ui -> chat

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

llama_stack/ui/app/auth/signin/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { signIn, signOut, useSession } from "next-auth/react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/chat/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@/components/chat/card";
 import { Copy, Check, Home, Github } from "lucide-react";
 import { useState } from "react";
 import { useRouter } from "next/navigation";

llama_stack/ui/app/chat-playground/page.tsx

@@ -2,16 +2,16 @@
 
 import { useState, useEffect } from "react";
 import { flushSync } from "react-dom";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/chat/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Chat } from "@/components/ui/chat";
-import { type Message } from "@/components/ui/chat-message";
+} from "@/components/chat/select";
+import { Chat } from "@/components/chat/chat";
+import { type Message } from "@/components/chat/chat-message";
 import { useAuthClient } from "@/hooks/use-auth-client";
 import type { CompletionCreateParams } from "llama-stack-client/resources/chat/completions";
 import type { Model } from "llama-stack-client/resources/models";

llama_stack/ui/app/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
-import { ThemeProvider } from "@/components/ui/theme-provider";
+import { ThemeProvider } from "@/components/chat/theme-provider";
 import { SessionProvider } from "@/components/providers/session-provider";
 import { Geist, Geist_Mono } from "next/font/google";
-import { ModeToggle } from "@/components/ui/mode-toggle";
+import { ModeToggle } from "@/components/chat/mode-toggle";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -20,9 +20,9 @@ export const metadata: Metadata = {
   description: "Llama Stack UI",
 };
 
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { SidebarProvider, SidebarTrigger } from "@/components/chat/sidebar";
 import { AppSidebar } from "@/components/layout/app-sidebar";
-import { SignInButton } from "@/components/ui/sign-in-button";
+import { SignInButton } from "@/components/chat/sign-in-button";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (

llama_stack/ui/app/logs/vector-stores/page.tsx

@@ -16,8 +16,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "@/components/chat/table";
+import { Skeleton } from "@/components/chat/skeleton";
 
 export default function VectorStoresPage() {
   const client = useAuthClient();

llama_stack/ui/components/chat-completions/chat-completion-detail.tsx

@@ -2,7 +2,7 @@
 
 import { ChatMessage, ChatCompletion } from "@/lib/types";
 import { ChatMessageItem } from "@/components/chat-completions/chat-messasge-item";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/chat/card";
 import {
   DetailLoadingView,
   DetailErrorView,

llama_stack/ui/components/chat-completions/chat-messasge-item.tsx

@@ -7,7 +7,7 @@ import { extractTextFromContentPart } from "@/lib/format-message-content";
 import {
   MessageBlock,
   ToolCallBlock,
-} from "@/components/ui/message-components";
+} from "@/components/chat/message-components";
 
 interface ChatMessageItemProps {
   message: ChatMessage;

llama_stack/ui/components/chat/chat-message.tsx

@@ -10,9 +10,9 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { FilePreview } from "@/components/ui/file-preview"
-import { MarkdownRenderer } from "@/components/ui/markdown-renderer"
+} from "@/components/chat/collapsible"
+import { FilePreview } from "@/components/chat/file-preview"
+import { MarkdownRenderer } from "@/components/chat/markdown-renderer"
 
 const chatBubbleVariants = cva(
   "group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]",

llama_stack/ui/components/chat/chat.tsx

@@ -11,12 +11,12 @@ import { ArrowDown, ThumbsDown, ThumbsUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useAutoScroll } from "@/hooks/use-auto-scroll"
-import { Button } from "@/components/ui/button"
-import { type Message } from "@/components/ui/chat-message"
-import { CopyButton } from "@/components/ui/copy-button"
-import { MessageInput } from "@/components/ui/message-input"
-import { MessageList } from "@/components/ui/message-list"
-import { PromptSuggestions } from "@/components/ui/prompt-suggestions"
+import { Button } from "@/components/chat/button"
+import { type Message } from "@/components/chat/chat-message"
+import { CopyButton } from "@/components/chat/copy-button"
+import { MessageInput } from "@/components/chat/message-input"
+import { MessageList } from "@/components/chat/message-list"
+import { PromptSuggestions } from "@/components/chat/prompt-suggestions"
 
 interface ChatPropsBase {
   handleSubmit: (

llama_stack/ui/components/chat/copy-button.tsx

@@ -4,7 +4,7 @@ import { Check, Copy } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/chat/button"
 
 type CopyButtonProps = {
   content: string

llama_stack/ui/components/chat/markdown-renderer.tsx

@@ -3,7 +3,7 @@ import Markdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 
 import { cn } from "@/lib/utils"
-import { CopyButton } from "@/components/ui/copy-button"
+import { CopyButton } from "@/components/chat/copy-button"
 
 interface MarkdownRendererProps {
   children: string

llama_stack/ui/components/chat/message-input.tsx

@@ -8,10 +8,10 @@ import { omit } from "remeda"
 import { cn } from "@/lib/utils"
 import { useAudioRecording } from "@/hooks/use-audio-recording"
 import { useAutosizeTextArea } from "@/hooks/use-autosize-textarea"
-import { AudioVisualizer } from "@/components/ui/audio-visualizer"
-import { Button } from "@/components/ui/button"
-import { FilePreview } from "@/components/ui/file-preview"
-import { InterruptPrompt } from "@/components/ui/interrupt-prompt"
+import { AudioVisualizer } from "@/components/chat/audio-visualizer"
+import { Button } from "@/components/chat/button"
+import { FilePreview } from "@/components/chat/file-preview"
+import { InterruptPrompt } from "@/components/chat/interrupt-prompt"
 
 interface MessageInputBaseProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -254,6 +254,7 @@ export function MessageInput({
             variant="outline"
             className="h-8 w-8"
             aria-label="Attach a file"
+            disabled={true}
             onClick={async () => {
               const files = await showFileUploadDialog()
               addFiles(files)

llama_stack/ui/components/chat/message-list.tsx

@@ -2,8 +2,8 @@ import {
   ChatMessage,
   type ChatMessageProps,
   type Message,
-} from "@/components/ui/chat-message"
-import { TypingIndicator } from "@/components/ui/typing-indicator"
+} from "@/components/chat/chat-message"
+import { TypingIndicator } from "@/components/chat/typing-indicator"
 
 type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>
 

llama_stack/ui/components/chat/mode-toggle.tsx

@@ -4,13 +4,13 @@ import * as React from "react";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/chat/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/chat/dropdown-menu";
 
 export function ModeToggle() {
   const { setTheme } = useTheme();

llama_stack/ui/components/chat/sidebar.tsx

@@ -7,23 +7,23 @@ import { PanelLeftIcon } from "lucide-react";
 
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/chat/button";
+import { Input } from "@/components/chat/input";
+import { Separator } from "@/components/chat/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "@/components/chat/sheet";
+import { Skeleton } from "@/components/chat/skeleton";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@/components/chat/tooltip";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;

llama_stack/ui/components/layout/app-sidebar.tsx

@@ -21,14 +21,16 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarHeader,
-} from "@/components/ui/sidebar";
-
-const logItems = [
-  {
+} from "@/components/chat/sidebar";
+// Extracted Chat Playground item
+const chatPlaygroundItem = {
   title: "Chat Playground",
   url: "/chat-playground",
   icon: MessageCircle,
-  },
+};
+
+// Removed Chat Playground from log items
+const logItems = [
   {
     title: "Chat Completions",
     url: "/logs/chat-completions",
@@ -60,6 +62,35 @@ export function AppSidebar() {
         <Link href="/">Llama Stack</Link>
       </SidebarHeader>
       <SidebarContent>
+        {/* Chat Playground as its own section */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  asChild
+                  className={cn(
+                    "justify-start",
+                    pathname.startsWith(chatPlaygroundItem.url) &&
+                      "bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100",
+                  )}
+                >
+                  <Link href={chatPlaygroundItem.url}>
+                    <chatPlaygroundItem.icon
+                      className={cn(
+                        pathname.startsWith(chatPlaygroundItem.url) && "text-gray-900 dark:text-gray-100",
+                        "mr-2 h-4 w-4",
+                      )}
+                    />
+                    <span>{chatPlaygroundItem.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Logs section */}
         <SidebarGroup>
           <SidebarGroupLabel>Logs</SidebarGroupLabel>
           <SidebarGroupContent>

llama_stack/ui/components/layout/detail-layout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/chat/card";
+import { Skeleton } from "@/components/chat/skeleton";
 
 export function DetailLoadingView({ title }: { title: string }) {
   return (

llama_stack/ui/components/layout/page-breadcrumb.tsx

@@ -9,7 +9,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+} from "@/components/chat/breadcrumb";
 
 export interface BreadcrumbSegment {
   label: string;

llama_stack/ui/components/logs/logs-table.tsx

@@ -13,8 +13,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "@/components/chat/table";
+import { Skeleton } from "@/components/chat/skeleton";
 
 // Generic table row data interface
 export interface LogTableRow {

llama_stack/ui/components/responses/items/function-call-item.tsx

@@ -1,7 +1,7 @@
 import {
   MessageBlock,
   ToolCallBlock,
-} from "@/components/ui/message-components";
+} from "@/components/chat/message-components";
 import { FunctionCallItem } from "../utils/item-types";
 
 interface FunctionCallItemProps {

llama_stack/ui/components/responses/items/generic-item.tsx

@@ -1,7 +1,7 @@
 import {
   MessageBlock,
   ToolCallBlock,
-} from "@/components/ui/message-components";
+} from "@/components/chat/message-components";
 import { BaseItem } from "../utils/item-types";
 
 interface GenericItemProps {

llama_stack/ui/components/responses/items/grouped-function-call-item.tsx

@@ -1,7 +1,7 @@
 import {
   MessageBlock,
   ToolCallBlock,
-} from "@/components/ui/message-components";
+} from "@/components/chat/message-components";
 import { FunctionCallItem, FunctionCallOutputItem } from "../utils/item-types";
 
 interface GroupedFunctionCallItemProps {

llama_stack/ui/components/responses/items/message-item.tsx

@@ -1,4 +1,4 @@
-import { MessageBlock } from "@/components/ui/message-components";
+import { MessageBlock } from "@/components/chat/message-components";
 import { MessageItem } from "../utils/item-types";
 
 interface MessageItemProps {

llama_stack/ui/components/responses/items/web-search-item.tsx

@@ -1,7 +1,7 @@
 import {
   MessageBlock,
   ToolCallBlock,
-} from "@/components/ui/message-components";
+} from "@/components/chat/message-components";
 import { WebSearchCallItem } from "../utils/item-types";
 
 interface WebSearchItemProps {

llama_stack/ui/components/responses/responses-detail.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/chat/card";
+import { Skeleton } from "@/components/chat/skeleton";
 import {
   DetailLoadingView,
   DetailErrorView,

llama_stack/ui/components/vector-stores/vector-store-detail.tsx

@@ -2,8 +2,8 @@
 
 import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
 import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/chat/card";
+import { Skeleton } from "@/components/chat/skeleton";
 import {
   DetailLoadingView,
   DetailErrorView,
@@ -20,7 +20,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@/components/chat/table";
 
 interface VectorStoreDetailViewProps {
   store: VectorStore | null;

llama_stack/ui/package-lock.json

@@ -18,7 +18,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.18.2",
-        "llama-stack-client": "^0.2.15",
+        "llama-stack-client": "0.2.16",
         "lucide-react": "^0.510.0",
         "next": "15.3.3",
         "next-auth": "^4.24.11",
@@ -9926,9 +9926,9 @@
       "license": "MIT"
     },
     "node_modules/llama-stack-client": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/llama-stack-client/-/llama-stack-client-0.2.15.tgz",
-      "integrity": "sha512-onfYzgPWAxve4uP7BuiK/ZdEC7w6X1PIXXXpQY57qZC7C4xUAM5kwfT3JWIe/jE22Lwc2vTN1ScfYlAYcoYAsg==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/llama-stack-client/-/llama-stack-client-0.2.16.tgz",
+      "integrity": "sha512-jM7sh1CB5wVumutYb3qfmYJpoTe3IRAa5lm3Us4qO7zVP4tbo3eCE7BOFNWyChpjo9efafUItwogNh28pum9PQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/node": "^18.11.18",

llama_stack/ui/package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-tooltip": "^1.2.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.18.2",
     "llama-stack-client": "0.2.16",
     "lucide-react": "^0.510.0",
     "next": "15.3.3",