small nits with example queries

Author: brendan-kellam

packages/web/src/app/[domain]/chat/[id]/components/chatThreadPanel.tsx

@@ -1,23 +1,25 @@
 'use client';
 
 import { ResizablePanel } from '@/components/ui/resizable';
-import { ChatBoxToolbarProps } from '@/features/chat/components/chatBox/chatBoxToolbar';
 import { ChatThread } from '@/features/chat/components/chatThread';
-import { SBChatMessage, SET_CHAT_STATE_QUERY_PARAM, SetChatStatePayload } from '@/features/chat/types';
+import { LanguageModelInfo, SBChatMessage, SET_CHAT_STATE_QUERY_PARAM, SetChatStatePayload } from '@/features/chat/types';
+import { RepositoryQuery } from '@/lib/types';
 import { CreateUIMessage } from 'ai';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useChatId } from '../../useChatId';
 
 interface ChatThreadPanelProps {
-    chatBoxToolbarProps: Omit<ChatBoxToolbarProps, "selectedRepos" | "onSelectedReposChange">;
+    languageModels: LanguageModelInfo[];
+    repos: RepositoryQuery[];
     order: number;
     messages: SBChatMessage[];
     isChatReadonly: boolean;
 }
 
 export const ChatThreadPanel = ({
-    chatBoxToolbarProps,
+    languageModels,
+    repos,
     order,
     messages,
     isChatReadonly,
@@ -61,7 +63,8 @@ export const ChatThreadPanel = ({
                     id={chatId}
                     initialMessages={messages}
                     inputMessage={inputMessage}
-                    chatBoxToolbarProps={chatBoxToolbarProps}
+                    languageModels={languageModels}
+                    repos={repos}
                     selectedRepos={selectedRepos}
                     onSelectedReposChange={setSelectedRepos}
                     isChatReadonly={isChatReadonly}

packages/web/src/app/[domain]/chat/[id]/page.tsx

@@ -72,10 +72,8 @@ export default async function Page({ params }: PageProps) {
                 />
                 <AnimatedResizableHandle />
                 <ChatThreadPanel
-                    chatBoxToolbarProps={{
-                        languageModels,
-                        repos: indexedRepos,
-                    }}
+                    languageModels={languageModels}
+                    repos={indexedRepos}
                     messages={messages}
                     order={2}
                     isChatReadonly={isReadonly}

packages/web/src/app/[domain]/chat/components/newChatPanel.tsx

@@ -2,23 +2,28 @@
 
 import { ResizablePanel } from "@/components/ui/resizable";
 import { ChatBox } from "@/features/chat/components/chatBox";
-import { ChatBoxToolbar, ChatBoxToolbarProps } from "@/features/chat/components/chatBox/chatBoxToolbar";
+import { ChatBoxToolbar } from "@/features/chat/components/chatBox/chatBoxToolbar";
 import { CustomSlateEditor } from "@/features/chat/customSlateEditor";
 import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
+import { LanguageModelInfo } from "@/features/chat/types";
+import { RepositoryQuery } from "@/lib/types";
 import { useCallback, useState } from "react";
 import { Descendant } from "slate";
 
 interface NewChatPanelProps {
-    chatBoxToolbarProps: Omit<ChatBoxToolbarProps, "selectedRepos" | "onSelectedReposChange">;
+    languageModels: LanguageModelInfo[];
+    repos: RepositoryQuery[];
     order: number;
 }
 
 export const NewChatPanel = ({
-    chatBoxToolbarProps,
+    languageModels,
+    repos,
     order,
 }: NewChatPanelProps) => {
     const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
     const { createNewChatThread, isLoading } = useCreateNewChatThread();
+    const [isRepoSelectorOpen, setIsRepoSelectorOpen] = useState(false);
 
     const onSubmit = useCallback((children: Descendant[]) => {
         createNewChatThread(children, selectedRepos);
@@ -40,13 +45,16 @@ export const NewChatPanel = ({
                             className="min-h-[80px]"
                             preferredSuggestionsBoxPlacement="bottom-start"
                             isRedirecting={isLoading}
-                            languageModels={chatBoxToolbarProps.languageModels}
+                            languageModels={languageModels}
                         />
                         <div className="w-full flex flex-row items-center bg-accent rounded-b-md px-2">
                             <ChatBoxToolbar
-                                {...chatBoxToolbarProps}
+                                languageModels={languageModels}
+                                repos={repos}
                                 selectedRepos={selectedRepos}
                                 onSelectedReposChange={setSelectedRepos}
+                                isRepoSelectorOpen={isRepoSelectorOpen}
+                                onRepoSelectorOpenChanged={setIsRepoSelectorOpen}
                             />
                         </div>
                     </CustomSlateEditor>

packages/web/src/app/[domain]/chat/page.tsx

@@ -47,10 +47,8 @@ export default async function Page({ params }: PageProps) {
                 />
                 <AnimatedResizableHandle />
                 <NewChatPanel
-                    chatBoxToolbarProps={{
-                        languageModels,
-                        repos: indexedRepos,
-                    }}
+                    languageModels={languageModels}
+                    repos={indexedRepos}
                     order={2}
                 />
             </ResizablePanelGroup>

packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx

@@ -3,16 +3,18 @@
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { ChatBox } from "@/features/chat/components/chatBox";
+import { ChatBoxToolbar } from "@/features/chat/components/chatBox/chatBoxToolbar";
+import { LanguageModelInfo } from "@/features/chat/types";
 import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
-import { FileIcon, LucideIcon, SearchCodeIcon, SearchIcon } from "lucide-react";
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { SearchModeSelector, SearchModeSelectorProps } from "./toolbar";
-import { ReactEditor, useSlate } from "slate-react";
 import { resetEditor } from "@/features/chat/utils";
-import { ChatBoxToolbar, ChatBoxToolbarProps } from "@/features/chat/components/chatBox/chatBoxToolbar";
-import { getDisplayTime } from "@/lib/utils";
 import { useDomain } from "@/hooks/useDomain";
+import { RepositoryQuery } from "@/lib/types";
+import { getDisplayTime } from "@/lib/utils";
+import { BrainIcon, FileIcon, LucideIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { ReactEditor, useSlate } from "slate-react";
+import { SearchModeSelector, SearchModeSelectorProps } from "./toolbar";
 
 // @todo: we should probably rename this to a different type since it sort-of clashes
 // with the Suggestion system we have built into the chat box.
@@ -24,7 +26,7 @@ const suggestionTypes: Record<SuggestionType, {
     description: string;
 }> = {
     understand: {
-        icon: SearchCodeIcon,
+        icon: BrainIcon,
         title: "Understand",
         description: "Understand the codebase",
     },
@@ -40,6 +42,7 @@ const suggestionTypes: Record<SuggestionType, {
     },
 }
 
+
 const Highlight = ({ children }: { children: React.ReactNode }) => {
     return (
         <span className="text-highlight">
@@ -48,26 +51,53 @@ const Highlight = ({ children }: { children: React.ReactNode }) => {
     )
 }
 
-
 const suggestions: Record<SuggestionType, {
     queryText: string;
     queryNode?: ReactNode;
+    openRepoSelector?: boolean;
 }[]> = {
     understand: [
         {
-            queryText: "How does authentication work in this codebase? @repo:",
-            queryNode: <span>How does authentication work in this codebase? <Highlight>@repo:</Highlight></span>,
+            queryText: "How does authentication work in this codebase?",
+            openRepoSelector: true,
+        },
+        {
+            queryText: "How are API endpoints structured and organized?",
+            openRepoSelector: true,
+        },
+        {
+            queryText: "How does the build and deployment process work?",
+            openRepoSelector: true,
+        },
+        {
+            queryText: "How is error handling implemented across the application?",
+            openRepoSelector: true,
         },
     ],
     find: [
         {
-            queryText: "todo",
+            queryText: "Find examples of different logging libraries used throughout the codebase.",
         },
+        {
+            queryText: "Find examples of potential security vulnerabilities or authentication issues.",
+        },
+        {
+            queryText: "Find examples of API endpoints and route handlers.",
+        }
     ],
     summarize: [
         {
-            queryText: "todo",
+            queryText: "Summarize the purpose of this file @file:",
+            queryNode: <span>Summarize the purpose of this file <Highlight>@file:</Highlight></span>
+        },
+        {
+            queryText: "Summarize the project structure and architecture.",
+            openRepoSelector: true,
         },
+        {
+            queryText: "Provide a quick start guide for ramping up on this codebase.",
+            openRepoSelector: true,
+        }
     ],
 }
 
@@ -76,7 +106,8 @@ const MAX_RECENT_CHAT_HISTORY_COUNT = 10;
 
 interface AgenticSearchProps {
     searchModeSelectorProps: SearchModeSelectorProps;
-    chatBoxToolbarProps: Omit<ChatBoxToolbarProps, "selectedRepos" | "onSelectedReposChange">;
+    languageModels: LanguageModelInfo[];
+    repos: RepositoryQuery[];
     chatHistory: {
         id: string;
         createdAt: Date;
@@ -86,7 +117,8 @@ interface AgenticSearchProps {
 
 export const AgenticSearch = ({
     searchModeSelectorProps,
-    chatBoxToolbarProps,
+    languageModels,
+    repos,
     chatHistory,
 }: AgenticSearchProps) => {
     const [selectedSuggestionType, _setSelectedSuggestionType] = useState<SuggestionType | undefined>(undefined);
@@ -95,6 +127,7 @@ export const AgenticSearch = ({
     const editor = useSlate();
     const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
     const domain = useDomain();
+    const [isRepoSelectorOpen, setIsRepoSelectorOpen] = useState(false);
 
     const setSelectedSuggestionType = useCallback((type: SuggestionType | undefined) => {
         _setSelectedSuggestionType(type);
@@ -128,15 +161,18 @@ export const AgenticSearch = ({
                     }}
                     className="min-h-[50px]"
                     isRedirecting={isLoading}
-                    languageModels={chatBoxToolbarProps.languageModels}
+                    languageModels={languageModels}
                 />
                 <Separator />
                 <div className="relative">
                     <div className="w-full flex flex-row items-center bg-accent rounded-b-md px-2">
                         <ChatBoxToolbar
-                            {...chatBoxToolbarProps}
+                            languageModels={languageModels}
+                            repos={repos}
                             selectedRepos={selectedRepos}
                             onSelectedReposChange={setSelectedRepos}
+                            isRepoSelectorOpen={isRepoSelectorOpen}
+                            onRepoSelectorOpenChanged={setIsRepoSelectorOpen}
                         />
                         <SearchModeSelector
                             {...searchModeSelectorProps}
@@ -152,15 +188,20 @@ export const AgenticSearch = ({
                             <p className="text-muted-foreground text-sm mb-2">
                                 {suggestionTypes[selectedSuggestionType].title}
                             </p>
-                            {suggestions[selectedSuggestionType].map(({ queryText, queryNode }, index) => (
+                            {suggestions[selectedSuggestionType].map(({ queryText, queryNode, openRepoSelector }, index) => (
                                 <div
                                     key={index}
                                     className="flex flex-row items-center gap-2 cursor-pointer hover:bg-muted rounded-md px-1 py-0.5"
                                     onClick={() => {
                                         resetEditor(editor);
                                         editor.insertText(queryText);
                                         setSelectedSuggestionType(undefined);
-                                        ReactEditor.focus(editor);
+
+                                        if (openRepoSelector) {
+                                            setIsRepoSelectorOpen(true);
+                                        } else {
+                                            ReactEditor.focus(editor);
+                                        }
                                     }}
                                 >
                                     <SearchIcon className="w-4 h-4" />

packages/web/src/app/[domain]/components/homepage/index.tsx

@@ -72,10 +72,8 @@ export const Homepage = ({
                             isAgenticSearchEnabled,
                             onSearchModeChange: setSearchMode,
                         }}
-                        chatBoxToolbarProps={{
-                            repos: initialRepos,
-                            languageModels,
-                        }}
+                        languageModels={languageModels}
+                        repos={initialRepos}
                         chatHistory={chatHistory}
                     />
                 </CustomSlateEditor>

packages/web/src/env.mjs

@@ -110,7 +110,7 @@ export const env = createEnv({
         AWS_REGION: z.string().optional(),
 
         SOURCEBOT_CHAT_MODEL_TEMPERATURE: numberSchema.default(0.3),
-        SOURCEBOT_CHAT_MAX_STEP_COUNT: numberSchema.default(10),
+        SOURCEBOT_CHAT_MAX_STEP_COUNT: numberSchema.default(20),
 
         DEBUG_WRITE_CHAT_MESSAGES_TO_FILE: booleanSchema.default('false'),
     },

packages/web/src/features/chat/components/chatBox/chatBoxToolbar.tsx

@@ -19,13 +19,17 @@ export interface ChatBoxToolbarProps {
     repos: RepositoryQuery[];
     selectedRepos: string[];
     onSelectedReposChange: (repos: string[]) => void;
+    isRepoSelectorOpen: boolean;
+    onRepoSelectorOpenChanged: (isOpen: boolean) => void;
 }
 
 export const ChatBoxToolbar = ({
     languageModels,
     repos,
     selectedRepos,
     onSelectedReposChange,
+    isRepoSelectorOpen,
+    onRepoSelectorOpenChanged,
 }: ChatBoxToolbarProps) => {
     const editor = useSlate();
 
@@ -77,6 +81,8 @@ export const ChatBoxToolbar = ({
                         repos={repos.map((repo) => repo.repoName)}
                         selectedRepos={selectedRepos}
                         onSelectedReposChange={onSelectedReposChange}
+                        isOpen={isRepoSelectorOpen}
+                        onOpenChanged={onRepoSelectorOpenChanged}
                     />
                 </TooltipTrigger>
                 <TooltipContent side="bottom">

packages/web/src/features/chat/components/chatBox/repoSelector.tsx

@@ -29,6 +29,8 @@ interface RepoSelectorProps extends React.ButtonHTMLAttributes<HTMLButtonElement
     selectedRepos: string[];
     onSelectedReposChange: (repos: string[]) => void;
     className?: string;
+    isOpen: boolean;
+    onOpenChanged: (isOpen: boolean) => void;
 }
 
 export const RepoSelector = React.forwardRef<
@@ -41,17 +43,17 @@ export const RepoSelector = React.forwardRef<
             onSelectedReposChange,
             className,
             selectedRepos,
+            isOpen,
+            onOpenChanged,
             ...props
         },
         ref
     ) => {
-        const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-
         const handleInputKeyDown = (
             event: React.KeyboardEvent<HTMLInputElement>
         ) => {
             if (event.key === "Enter") {
-                setIsPopoverOpen(true);
+                onOpenChanged(true);
             } else if (event.key === "Backspace" && !event.currentTarget.value) {
                 const newSelectedRepos = [...selectedRepos];
                 newSelectedRepos.pop();
@@ -71,13 +73,13 @@ export const RepoSelector = React.forwardRef<
         };
 
         const handleTogglePopover = () => {
-            setIsPopoverOpen((prev) => !prev);
+            onOpenChanged(!isOpen);
         };
 
         return (
             <Popover
-                open={isPopoverOpen}
-                onOpenChange={setIsPopoverOpen}
+                open={isOpen}
+                onOpenChange={onOpenChanged}
             >
                 <PopoverTrigger asChild>
                     <Button
@@ -110,7 +112,7 @@ export const RepoSelector = React.forwardRef<
                 <PopoverContent
                     className="w-auto p-0"
                     align="start"
-                    onEscapeKeyDown={() => setIsPopoverOpen(false)}
+                    onEscapeKeyDown={() => onOpenChanged(false)}
                 >
                     <Command>
                         <CommandInput