Remove popular chat topics from new chat screen (#9307)

Signed-off-by: Douwe Osinga <douwe@squareup.com>
Co-authored-by: Douwe Osinga <douwe@squareup.com>

RELEASE_CHECKLIST.md

@@ -35,7 +35,7 @@ Test various ways to start a conversation:
   - [ ] Ask "what is your working directory?"
   - [ ] Response should match the new directory
 - [ ] Open a new window, click chat in left side for new chat
-- [ ] Click "create a tamagotchi game" in popular chat topics to test developer extension
+- [ ] Type "create a tamagotchi game" in the chat input to test developer extension
 
 ### Recipes
 

ui/desktop/src/components/BaseChat.tsx

@@ -10,7 +10,6 @@ import { defineMessages, useIntl } from '../i18n';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { SearchView } from './conversation/SearchView';
 import LoadingGoose from './LoadingGoose';
-import PopularChatTopics from './PopularChatTopics';
 import ProgressiveMessageList from './ProgressiveMessageList';
 import { MainPanelLayout } from './Layout/MainPanelLayout';
 import ChatInput from './ChatInput';
@@ -71,7 +70,6 @@ interface BaseChatProps {
   customMainLayoutProps?: Record<string, unknown>;
   contentClassName?: string;
   disableSearch?: boolean;
-  showPopularTopics?: boolean;
   suppressEmptyState: boolean;
   sessionId: string;
   isActiveSession: boolean;
@@ -320,9 +318,6 @@ export default function BaseChat({
     });
   };
 
-  const showPopularTopics =
-    messages.length === 0 && !initialMessage && chatState === ChatState.Idle;
-
   const chat: ChatType = {
     messages,
     recipe,
@@ -461,10 +456,6 @@ export default function BaseChat({
 
                 <div className="block h-8" />
               </>
-            ) : !recipe && showPopularTopics ? (
-              <PopularChatTopics
-                append={(text: string) => handleSubmit({ msg: text, images: [] })}
-              />
             ) : null}
           </ScrollArea>
 

ui/desktop/src/components/PopularChatTopics.tsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import { FolderTree, MessageSquare, Code } from 'lucide-react';
-import { defineMessages, useIntl } from '../i18n';
-
-interface PopularChatTopicsProps {
-  append: (text: string) => void;
-}
-
-interface ChatTopic {
-  id: string;
-  icon: React.ReactNode;
-  description: string;
-  prompt: string;
-}
-
-const i18n = defineMessages({
-  heading: {
-    id: 'popularChatTopics.heading',
-    defaultMessage: 'Popular chat topics',
-  },
-  start: {
-    id: 'popularChatTopics.start',
-    defaultMessage: 'Start',
-  },
-  organizePhotos: {
-    id: 'popularChatTopics.organizePhotos',
-    defaultMessage:
-      'Organize the photos on my desktop into neat little folders by subject matter',
-  },
-  governmentForms: {
-    id: 'popularChatTopics.governmentForms',
-    defaultMessage:
-      'Describe in detail how various forms of government works and rank each by units of geese',
-  },
-  tamagotchiGame: {
-    id: 'popularChatTopics.tamagotchiGame',
-    defaultMessage:
-      'Develop a tamagotchi game that lives on my computer and follows a pixelated styling',
-  },
-});
-
-export default function PopularChatTopics({ append }: PopularChatTopicsProps) {
-  const intl = useIntl();
-
-  const POPULAR_TOPICS: ChatTopic[] = [
-    {
-      id: 'organize-photos',
-      icon: <FolderTree className="w-5 h-5" />,
-      description: intl.formatMessage(i18n.organizePhotos),
-      prompt: intl.formatMessage(i18n.organizePhotos),
-    },
-    {
-      id: 'government-forms',
-      icon: <MessageSquare className="w-5 h-5" />,
-      description: intl.formatMessage(i18n.governmentForms),
-      prompt: intl.formatMessage(i18n.governmentForms),
-    },
-    {
-      id: 'tamagotchi-game',
-      icon: <Code className="w-5 h-5" />,
-      description: intl.formatMessage(i18n.tamagotchiGame),
-      prompt: intl.formatMessage(i18n.tamagotchiGame),
-    },
-  ];
-
-  const handleTopicClick = (prompt: string) => {
-    append(prompt);
-  };
-
-  return (
-    <div className="absolute bottom-0 left-0 p-6 max-w-md">
-      <h3 className="text-text-secondary text-sm mb-1">
-        {intl.formatMessage(i18n.heading)}
-      </h3>
-      <div className="space-y-1">
-        {POPULAR_TOPICS.map((topic) => (
-          <div
-            key={topic.id}
-            className="flex items-center justify-between py-1.5 hover:bg-background-secondary rounded-md cursor-pointer transition-colors"
-            onClick={() => handleTopicClick(topic.prompt)}
-          >
-            <div className="flex items-center gap-3 flex-1 min-w-0">
-              <div className="flex-shrink-0 text-text-secondary">{topic.icon}</div>
-              <div className="flex-1 min-w-0">
-                <p className="text-text-primary text-sm leading-tight">{topic.description}</p>
-              </div>
-            </div>
-            <div className="flex-shrink-0 ml-4">
-              <button
-                className="text-sm text-text-secondary hover:text-text-primary transition-colors cursor-pointer"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleTopicClick(topic.prompt);
-                }}
-              >
-                {intl.formatMessage(i18n.start)}
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

ui/desktop/src/i18n/messages/en.json

@@ -314,7 +314,6 @@
   "costTracker.pricingUnavailable": {
     "defaultMessage": "Pricing data unavailable for {model}"
   },
-
   "costTracker.totalSessionCost": {
     "defaultMessage": "Total session cost: {cost}"
   },
@@ -2655,21 +2654,6 @@
   "permissionSetting.permissionRulesDescription": {
     "defaultMessage": "Hidden instructions that will be passed to the provider to help direct and add context to your responses."
   },
-  "popularChatTopics.governmentForms": {
-    "defaultMessage": "Describe in detail how various forms of government works and rank each by units of geese"
-  },
-  "popularChatTopics.heading": {
-    "defaultMessage": "Popular chat topics"
-  },
-  "popularChatTopics.organizePhotos": {
-    "defaultMessage": "Organize the photos on my desktop into neat little folders by subject matter"
-  },
-  "popularChatTopics.start": {
-    "defaultMessage": "Start"
-  },
-  "popularChatTopics.tamagotchiGame": {
-    "defaultMessage": "Develop a tamagotchi game that lives on my computer and follows a pixelated styling"
-  },
   "privacyInfoModal.collectErrors": {
     "defaultMessage": "Error types (e.g., \"rate_limit\", \"auth\" - no details)"
   },

ui/desktop/src/i18n/messages/zh-CN.json

@@ -2597,21 +2597,6 @@
   "permissionSetting.permissionRulesDescription": {
     "defaultMessage": "传给提供商的隐藏指令，用于引导并为回复补充上下文。"
   },
-  "popularChatTopics.governmentForms": {
-    "defaultMessage": "详细介绍各种政府形式的运作方式，并按“鹅”的单位对每种进行排名"
-  },
-  "popularChatTopics.heading": {
-    "defaultMessage": "热门聊天话题"
-  },
-  "popularChatTopics.organizePhotos": {
-    "defaultMessage": "按主题把我桌面上的照片整理成一些整洁的小文件夹"
-  },
-  "popularChatTopics.start": {
-    "defaultMessage": "开始"
-  },
-  "popularChatTopics.tamagotchiGame": {
-    "defaultMessage": "开发一个住在我电脑里、像素风的电子宠物游戏"
-  },
   "privacyInfoModal.collectErrors": {
     "defaultMessage": "错误类型（例如“rate_limit”“auth”——不含详情）"
   },