feat: bookmark top 5 prompts by default

gui/src/components/ConversationStarters/ConversationStarterCard.tsx

@@ -1,7 +1,5 @@
 import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
 import { SlashCommandDescription } from "core";
-import { useState } from "react";
-import { defaultBorderRadius, vscInputBackground } from "..";
 
 interface ConversationStarterCardProps {
   command: SlashCommandDescription;
@@ -12,26 +10,20 @@ export function ConversationStarterCard({
   command,
   onClick,
 }: ConversationStarterCardProps) {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
     <div
-      className="mb-2 w-full shadow-md hover:cursor-pointer hover:brightness-110"
-      style={{
-        borderRadius: defaultBorderRadius,
-        backgroundColor: vscInputBackground,
-      }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      className="bg-vsc-input-background mb-2 w-full rounded-md shadow-md hover:cursor-pointer hover:brightness-110"
       onClick={() => onClick(command)}
     >
       <div className="flex px-3 py-1.5">
         <div className="mr-3 flex-shrink-0 self-start pt-0.5">
           <ChatBubbleLeftIcon className="text-lightgray h-5 w-5" />
         </div>
-        <div className="flex flex-1 flex-col">
+        <div className="flex flex-1 flex-col justify-center">
           <div className="text-xs font-medium">{command.name}</div>
-          <div className="text-lightgray text-xs">{command.description}</div>
+          {command.description && (
+            <div className="text-lightgray text-xs">{command.description}</div>
+          )}
         </div>
       </div>
     </div>

gui/src/components/ConversationStarters/ConversationStarterCards.tsx

@@ -1,15 +1,24 @@
 import { SlashCommandDescription } from "core";
-import { useAppDispatch } from "../../redux/hooks";
+import { useState } from "react";
+import { useBookmarkedSlashCommands } from "../../hooks/useBookmarkedSlashCommands";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { setMainEditorContentTrigger } from "../../redux/slices/sessionSlice";
 import { getParagraphNodeFromString } from "../mainInput/utils";
 import { ConversationStarterCard } from "./ConversationStarterCard";
-import { useBookmarkedSlashCommands } from "./useBookmarkedSlashCommands";
 
-const NUM_CARDS_TO_RENDER = 3;
+const NUM_CARDS_TO_RENDER = 5;
 
 export function ConversationStarterCards() {
   const dispatch = useAppDispatch();
-  const { cmdsSortedByBookmark } = useBookmarkedSlashCommands();
+  const [showAll, setShowAll] = useState(false);
+  const { isCommandBookmarked } = useBookmarkedSlashCommands();
+  const slashCommands = useAppSelector(
+    (state) => state.config.config.slashCommands ?? [],
+  );
+
+  const bookmarkedSlashCommands = slashCommands.filter((command) =>
+    isCommandBookmarked(command.name),
+  );
 
   function onClick(command: SlashCommandDescription) {
     if (command.prompt) {
@@ -19,19 +28,35 @@ export function ConversationStarterCards() {
     }
   }
 
-  if (!cmdsSortedByBookmark || cmdsSortedByBookmark.length === 0) {
+  if (bookmarkedSlashCommands.length === 0) {
     return null;
   }
 
+  const visibleCommands = showAll
+    ? bookmarkedSlashCommands
+    : bookmarkedSlashCommands.slice(0, NUM_CARDS_TO_RENDER);
+
+  const remainingCount = bookmarkedSlashCommands.length - NUM_CARDS_TO_RENDER;
+
   return (
-    <div className="flex w-full max-w-full flex-col lg:grid lg:grid-cols-3 lg:gap-4">
-      {cmdsSortedByBookmark.slice(0, NUM_CARDS_TO_RENDER).map((command, i) => (
-        <ConversationStarterCard
-          key={command.name + i}
-          command={command}
-          onClick={onClick}
-        />
-      ))}
+    <div className="flex w-full max-w-full flex-col">
+      <div className="lg:grid lg:grid-cols-3 lg:gap-4">
+        {visibleCommands.map((command, i) => (
+          <ConversationStarterCard
+            key={command.name + i}
+            command={command}
+            onClick={onClick}
+          />
+        ))}
+      </div>
+      {bookmarkedSlashCommands.length > NUM_CARDS_TO_RENDER && (
+        <span
+          className="text-lightgray mt-1 cursor-pointer text-xs hover:underline"
+          onClick={() => setShowAll(!showAll)}
+        >
+          {showAll ? "Show less" : `Show ${remainingCount} more...`}
+        </span>
+      )}
     </div>
   );
 }

gui/src/components/mainInput/Lump/BlockSettingsTopToolbar.tsx

@@ -21,6 +21,7 @@ interface BlockSettingsToolbarIcon {
   itemCount?: number;
   onClick: () => void;
   isSelected?: boolean;
+  className?: string;
 }
 
 interface Section {
@@ -53,7 +54,7 @@ function BlockSettingsToolbarIcon(props: BlockSettingsToolbarIcon) {
         style={{
           backgroundColor: props.isSelected ? vscBadgeBackground : undefined,
         }}
-        className={`relative flex select-none items-center rounded-full px-1 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50`}
+        className={`relative flex select-none items-center rounded-full px-1 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 ${props.className || ""}`}
       >
         <props.icon
           className="h-3 w-3 hover:brightness-125"
@@ -98,37 +99,39 @@ export function BlockSettingsTopToolbar(props: BlockSettingsTopToolbarProps) {
   };
 
   return (
-    <div className="flex items-center justify-between">
-      <div>
-        <div className="xs:flex hidden items-center justify-center text-gray-400">
-          <BlockSettingsToolbarIcon
-            icon={isExpanded ? ChevronLeftIcon : EllipsisHorizontalIcon}
-            tooltip={isExpanded ? "Collapse sections" : "Expand sections"}
-            isSelected={false}
-            onClick={handleEllipsisClick}
-          />
-          <div
-            className="flex overflow-hidden transition-all duration-200"
-            style={{ width: isExpanded ? `160px` : "0px" }}
-          >
-            <div className="flex">
-              {sections.map((section) => (
-                <BlockSettingsToolbarIcon
-                  key={section.id}
-                  icon={section.icon}
-                  tooltip={section.tooltip}
-                  isSelected={props.selectedSection === section.id}
-                  onClick={() =>
-                    props.setSelectedSection(
-                      props.selectedSection === section.id ? null : section.id,
-                    )
-                  }
-                />
-              ))}
-            </div>
+    <div className="flex w-full items-center justify-between">
+      <div className="xs:flex hidden items-center justify-center text-gray-400">
+        <BlockSettingsToolbarIcon
+          className="-ml-1.5"
+          icon={isExpanded ? ChevronLeftIcon : EllipsisHorizontalIcon}
+          tooltip={isExpanded ? "Collapse sections" : "Expand sections"}
+          isSelected={false}
+          onClick={handleEllipsisClick}
+        />
+        <div
+          className="flex overflow-hidden transition-all duration-200"
+          style={{ width: isExpanded ? `160px` : "0px" }}
+        >
+          <div className="flex">
+            {sections.map((section) => (
+              <BlockSettingsToolbarIcon
+                key={section.id}
+                icon={section.icon}
+                tooltip={section.tooltip}
+                isSelected={props.selectedSection === section.id}
+                onClick={() =>
+                  props.setSelectedSection(
+                    props.selectedSection === section.id ? null : section.id,
+                  )
+                }
+              />
+            ))}
           </div>
         </div>
       </div>
+      <div className="ml-auto">
+        <AssistantSelect />
+      </div>
       <AssistantSelect />
     </div>
   );

gui/src/components/mainInput/Lump/sections/PromptsSection.tsx

@@ -3,8 +3,9 @@ import {
   PencilIcon,
 } from "@heroicons/react/24/outline";
 import { BookmarkIcon as BookmarkSolid } from "@heroicons/react/24/solid";
+import { useBookmarkedSlashCommands } from "../../../../hooks/useBookmarkedSlashCommands";
+import { useAppSelector } from "../../../../redux/hooks";
 import { fontSize } from "../../../../util";
-import { useBookmarkedSlashCommands } from "../../../ConversationStarters/useBookmarkedSlashCommands";
 import { AddBlockButton } from "./AddBlockButton";
 
 interface PromptRowProps {
@@ -54,22 +55,32 @@ function PromptRow({
 }
 
 export function PromptsSection() {
-  const { cmdsSortedByBookmark, bookmarkStatuses, toggleBookmark } =
-    useBookmarkedSlashCommands();
+  const { isCommandBookmarked, toggleBookmark } = useBookmarkedSlashCommands();
+  const slashCommands = useAppSelector(
+    (state) => state.config.config.slashCommands ?? [],
+  );
 
   const handleEdit = (prompt: any) => {
     // Handle edit action here
     console.log("Editing prompt:", prompt);
   };
 
+  const sortedCommands = [...slashCommands].sort((a, b) => {
+    const aBookmarked = isCommandBookmarked(a.name);
+    const bBookmarked = isCommandBookmarked(b.name);
+    if (aBookmarked && !bBookmarked) return -1;
+    if (!aBookmarked && bBookmarked) return 1;
+    return 0;
+  });
+
   return (
     <div className="flex flex-col gap-1">
-      {cmdsSortedByBookmark?.map((prompt, i) => (
+      {sortedCommands.map((prompt) => (
         <PromptRow
           key={prompt.name}
           command={prompt.name}
           description={prompt.description}
-          isBookmarked={bookmarkStatuses[prompt.name]}
+          isBookmarked={isCommandBookmarked(prompt.name)}
           setIsBookmarked={() => toggleBookmark(prompt)}
           onEdit={() => handleEdit(prompt)}
         />

gui/src/hooks/useBookmarkedSlashCommands.ts

@@ -0,0 +1,45 @@
+import { SlashCommandDescription } from "core";
+import { usePostHog } from "posthog-js/react";
+import {
+  bookmarkSlashCommand,
+  selectBookmarkedSlashCommands,
+  unbookmarkSlashCommand,
+} from "../redux";
+import { useAppDispatch, useAppSelector } from "../redux/hooks";
+
+export function useBookmarkedSlashCommands() {
+  const dispatch = useAppDispatch();
+  const posthog = usePostHog();
+  const bookmarkedCommands = useAppSelector(selectBookmarkedSlashCommands);
+
+  const isCommandBookmarked = (commandName: string): boolean => {
+    return bookmarkedCommands.includes(commandName);
+  };
+
+  const toggleBookmark = (command: SlashCommandDescription) => {
+    const isBookmarked = isCommandBookmarked(command.name);
+
+    posthog.capture("toggle_bookmarked_slash_command", {
+      isBookmarked,
+    });
+
+    if (isBookmarked) {
+      dispatch(
+        unbookmarkSlashCommand({
+          commandName: command.name,
+        }),
+      );
+    } else {
+      dispatch(
+        bookmarkSlashCommand({
+          commandName: command.name,
+        }),
+      );
+    }
+  };
+
+  return {
+    isCommandBookmarked,
+    toggleBookmark,
+  };
+}