Add Composio logo to app sidebar

components/app-sidebar.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/components/ui/sidebar';
 import Link from 'next/link';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { ComposioIcon } from '@/components/icons';
 
 export function AppSidebar({ user }: { user: User | undefined }) {
   const router = useRouter();
@@ -35,7 +36,7 @@ export function AppSidebar({ user }: { user: User | undefined }) {
               className="flex flex-row gap-3 items-center"
             >
               <span className="text-lg font-semibold px-2 hover:bg-muted rounded-md cursor-pointer">
-                Chatbot
+                <ComposioIcon />
               </span>
             </Link>
             <Tooltip>

components/chat.tsx

@@ -39,7 +39,7 @@ export function Chat({
 }) {
   const { mutate } = useSWRConfig();
   const { state: toolbarState } = useToolbarState();
-  
+
   // Create a ref to always have the latest toolbar state
   const toolbarStateRef = useRef(toolbarState);
   useEffect(() => {
@@ -76,7 +76,7 @@ export function Chat({
       const enabledToolkits = Array.from(
         currentToolbarState.enabledToolkitsWithStatus.entries(),
       ).map(([slug, isConnected]) => ({ slug, isConnected }));
-      
+
       return {
         id,
         message: body.messages.at(-1),

components/icons.tsx

@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 export const BotIcon = () => {
   return (
     <svg
@@ -56,6 +58,29 @@ export const AttachmentIcon = () => {
   );
 };
 
+export const ComposioIcon = ({ size = 96 }) => {
+  return (
+    <div>
+      <Image
+        style={{ color: 'currentColor' }}
+        src="/assets/icons/composio-logo-light.svg"
+        alt="Composio logo"
+        width={size}
+        height={size}
+        className="block dark:hidden"
+      />
+      <Image
+        style={{ color: 'currentColor' }}
+        src="/assets/icons/composio-logo-dark.svg"
+        alt="Composio logo"
+        width={size}
+        height={size}
+        className="hidden dark:block"
+      />
+    </div>
+  );
+};
+
 export const VercelIcon = ({ size = 17 }) => {
   return (
     <svg

components/suggested-actions.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import { motion } from 'framer-motion';
-import { Button } from './ui/button';
-import { memo } from 'react';
-import type { UseChatHelpers } from '@ai-sdk/react';
-import type { VisibilityType } from './visibility-selector';
+import { motion } from "framer-motion";
+import { Button } from "./ui/button";
+import { memo } from "react";
+import type { UseChatHelpers } from "@ai-sdk/react";
+import type { VisibilityType } from "./visibility-selector";
 
 interface SuggestedActionsProps {
   chatId: string;
-  append: UseChatHelpers['append'];
+  append: UseChatHelpers["append"];
   selectedVisibilityType: VisibilityType;
 }
 
@@ -19,24 +19,24 @@ function PureSuggestedActions({
 }: SuggestedActionsProps) {
   const suggestedActions = [
     {
-      title: 'What are the advantages',
-      label: 'of using Next.js?',
-      action: 'What are the advantages of using Next.js?',
+      title: "Read my last 5 emails",
+      label: "and summarize them.",
+      action: "Read my last 5 emails and summarize them.",
     },
     {
-      title: 'Write code to',
-      label: `demonstrate djikstra's algorithm`,
-      action: `Write code to demonstrate djikstra's algorithm`,
+      title: "Star the repository `composiohq/composio`",
+      label: `on GitHub`,
+      action: `Star the repository \`composiohq/composio\` on GitHub`,
     },
     {
-      title: 'Help me write an essay',
-      label: `about silicon valley`,
-      action: `Help me write an essay about silicon valley`,
+      title: "What issues are assigned to me",
+      label: `in Linear. Order by projects.`,
+      action: `What issues are assigned to me in Linear. Order by projects.`,
     },
     {
-      title: 'Fetch my Gmail details',
-      label: 'using the Gmail tool.',
-      action: 'Fetch my Gmail details using the Gmail tool.',
+      title: "Fetch my Gmail details",
+      label: "using the Gmail tool.",
+      action: "Fetch my Gmail details using the Gmail tool.",
     },
   ];
 
@@ -52,15 +52,15 @@ function PureSuggestedActions({
           exit={{ opacity: 0, y: 20 }}
           transition={{ delay: 0.05 * index }}
           key={`suggested-action-${suggestedAction.title}-${index}`}
-          className={index > 1 ? 'hidden sm:block' : 'block'}
+          className={index > 1 ? "hidden sm:block" : "block"}
         >
           <Button
             variant="ghost"
             onClick={async () => {
-              window.history.replaceState({}, '', `/chat/${chatId}`);
+              window.history.replaceState({}, "", `/chat/${chatId}`);
 
               append({
-                role: 'user',
+                role: "user",
                 content: suggestedAction.action,
               });
             }}

components/toolbar.tsx

@@ -34,7 +34,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { ExternalLink, Loader2, X, Wrench, Check, Trash2 } from 'lucide-react';
+import {
+  ExternalLink,
+  Loader2,
+  X,
+  LucideWrench,
+  Check,
+  Trash2,
+} from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { useToast } from '@/hooks/use-toast';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -530,10 +537,12 @@ export function ToolbarProvider({ children }: { children: React.ReactNode }) {
   // Read from cookie if available, otherwise default to open
   const getInitialState = () => {
     if (typeof window === 'undefined') return true; // Default to open on server
-    const match = document.cookie.match(new RegExp(`(^| )${TOOLBAR_COOKIE_NAME}=([^;]+)`));
+    const match = document.cookie.match(
+      new RegExp(`(^| )${TOOLBAR_COOKIE_NAME}=([^;]+)`),
+    );
     return match ? match[2] === 'true' : true; // Default to open if no cookie
   };
-  
+
   const [_open, _setOpen] = React.useState(getInitialState);
   const open = _open;
   const setOpen = React.useCallback(
@@ -722,7 +731,7 @@ function ToolbarDesktop() {
           {/* Header */}
           <div className="flex items-center justify-between p-4 border-b border-sidebar-border">
             <div className="flex items-center gap-2">
-              <Wrench className="size-4" />
+              <LucideWrench className="size-4" />
               <h2 className="text-base font-semibold">Toolkits</h2>
             </div>
             <ToolbarTrigger />
@@ -872,7 +881,7 @@ function ToolbarMobile() {
         <div className="flex size-full flex-col">
           <SheetHeader className="p-4 border-b">
             <div className="flex items-center gap-2">
-              <Wrench className="size-4" />
+              <LucideWrench className="size-4" />
               <SheetTitle className="text-base">Toolkits</SheetTitle>
             </div>
           </SheetHeader>
@@ -980,7 +989,11 @@ export function ToolBarTrigger() {
             )}
             aria-label="Toggle Toolkits"
           >
-            {open ? <X className="size-5" /> : <Wrench className="size-5" />}
+            {open ? (
+              <X className="size-5" />
+            ) : (
+              <LucideWrench className="size-5" />
+            )}
             <span className="font-medium">Toolkits</span>
             {hasEnabledTools && !open && (
               <span className="absolute -top-1 -right-1 size-3 bg-green-500 rounded-full" />