Display pinned bots in Drawer

frontend/src/@types/bot.d.ts

@@ -206,7 +206,7 @@ export type GetBotsResponse = BotListItem[];
 
 export type GetMyBotResponse = BotDetails;
 
-export type GetPinnedBotResponse = BotMeta[];
+export type GetPinnedBotResponse = BotListItem[];
 
 export type GetBotSummaryResponse = BotSummary;
 

frontend/src/components/Drawer.tsx

@@ -45,6 +45,7 @@ import IconPinnedBot from './IconPinnedBot';
 type Props = BaseProps & {
   isAdmin: boolean;
   conversations?: ConversationMeta[];
+  pinnedBots?: BotListItem[];
   starredBots?: BotListItem[];
   recentlyUsedUnstarredBots?: BotListItem[];
   updateConversationTitle: (
@@ -202,7 +203,7 @@ const Drawer: React.FC<Props> = (props) => {
   const navigate = useNavigate();
   const { getPageLabel } = usePageLabel();
   const { opened, switchOpen, drawerOptions } = useDrawer();
-  const { conversations, starredBots, recentlyUsedUnstarredBots } = props;
+  const { conversations, pinnedBots, starredBots, recentlyUsedUnstarredBots } = props;
 
   const location = useLocation();
 
@@ -310,6 +311,25 @@ const Drawer: React.FC<Props> = (props) => {
                 onClick={closeSmallDrawer}
               />
 
+              {pinnedBots?.filter((bot) => bot.available).length ? (
+                <ExpandableDrawerGroup
+                  label={t('app.pinnedBots')}
+                  className="border-t bg-aws-squid-ink-light pt-1 dark:bg-aws-squid-ink-dark">
+                  {pinnedBots
+                    .filter((bot) => bot.available)
+                    .map((bot) => (
+                      <DrawerItem
+                        key={bot.id}
+                        isActive={botId === bot.id && !conversationId}
+                        to={`/bot/${bot.id}`}
+                        icon={<IconPinnedBot showAlways />}
+                        labelComponent={bot.title}
+                        onClick={onClickNewBotChat}
+                      />
+                    ))}
+                </ExpandableDrawerGroup>
+              ) : null}
+
               <ExpandableDrawerGroup
                 label={t('app.starredBots')}
                 className="border-t bg-aws-squid-ink-light pt-1 dark:bg-aws-squid-ink-dark">

frontend/src/features/discover/hooks/useBotStore.ts

@@ -1,6 +1,6 @@
 import useBotApi from '../../../hooks/useBotApi';
 import useBotStoreApi from './useBotStoreApi';
-import { BotMeta } from '../../../@types/bot';
+import { BotListItem, BotMeta } from '../../../@types/bot';
 import { useCallback } from 'react';
 
 const useBotStore = () => {
@@ -31,7 +31,7 @@ const useBotStore = () => {
       // Update pinnedBots
       if (pinnedBots) {
         mutatePinnedBots(
-          pinnedBots.map((bot: BotMeta) =>
+          pinnedBots.map((bot: BotListItem) =>
             bot.id === botId ? { ...bot, isStarred } : bot
           ),
           false

frontend/src/hooks/useBot.ts

@@ -31,6 +31,11 @@ const useBot = (shouldAutoRefreshMyBots?: boolean) => {
     starred: true,
   });
 
+  const {
+    data: pinnedBots,
+    mutate: mutatePinnedBots,
+  } = api.getPinnedBots();
+
   const {
     data: recentlyUsedBots,
     mutate: mutateRecentlyUsedBots,
@@ -44,6 +49,8 @@ const useBot = (shouldAutoRefreshMyBots?: boolean) => {
     myBots,
     mutateMyBots,
     isLoadingMyBots,
+    pinnedBots: pinnedBots?.filter((bot) => bot.available),
+    mutatePinnedBots,
     starredBots: starredBots?.filter((bot) => bot.available),
     mutateStarredBots,
     recentlyUsedBots,

frontend/src/i18n/de/index.ts

@@ -3,6 +3,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Nachricht senden',
+      pinnedBots: 'Angeheftete Bots',
       starredBots: 'Favorisierte Bots',
       recentlyUsedBots: 'Zuletzt genutzte Bots',
       conversationHistory: 'Verlauf',

frontend/src/i18n/en/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'How can I Help You?',
+      pinnedBots: 'Pinned Bots',
       starredBots: 'Starred Bots',
       recentlyUsedBots: 'Recently Used Bots',
       conversationHistory: 'Recent Chats',

frontend/src/i18n/es/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Chat Bedrock',
       inputMessage: 'Enviar un mensaje',
+      pinnedBots: 'Bots Fijados',
       starredBots: 'Bots Favoritos',
       recentlyUsedBots: 'Bots Usados Recientemente',
       conversationHistory: 'Historial',

frontend/src/i18n/fr/index.ts

@@ -3,6 +3,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Envoyer un message',
+      pinnedBots: 'Bots épinglés',
       starredBots: 'Epingler un bot',
       recentlyUsedBots: 'Bot utilisé récemment',
       conversationHistory: 'Historique',

frontend/src/i18n/id/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Bisakah Saya Membantu Anda?',
+      pinnedBots: 'Bot yang Dipin',
       starredBots: 'Bot Favorit',
       recentlyUsedBots: 'Bot yang Baru Digunakan',
       conversationHistory: 'Riwayat',

frontend/src/i18n/it/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Inviare un messaggio',
+      pinnedBots: 'Bot fissati',
       starredBots: 'Bot preferiti',
       recentlyUsedBots: 'Bot utilizzati di recente',
       conversationHistory: 'Cronologia',

frontend/src/i18n/ja/index.ts

@@ -11,6 +11,7 @@ const translation: typeof en = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'お手伝いできることはありますか？',
+      pinnedBots: 'ピン留めボット',
       starredBots: 'スター付きのボット',
       recentlyUsedBots: '最近使用したボット',
       conversationHistory: '最近のチャット',

frontend/src/i18n/ko/index.ts

@@ -6,6 +6,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: '입력해 주십시오',
+      pinnedBots: '고정된 봇',
     },
     deleteDialog: {
       title: '삭제 확인',

frontend/src/i18n/ms/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Bolehkah Saya Membantu Anda?',
+      pinnedBots: 'Bot yang Disemat',
       starredBots: 'Bot Berbintang',
       recentlyUsedBots: 'Bot Yang Baru Digunakan',
       conversationHistory: 'Sejarah',

frontend/src/i18n/nb/index.ts

@@ -9,6 +9,7 @@ const translation = {
       name: 'ACO-gpt',
       nameWithoutClaude: 'ACO-gpt',
       inputMessage: 'Send en melding',
+      pinnedBots: 'Faste boter',
       starredBots: 'Favorittbot',
       recentlyUsedBots: 'Nylig brukte boter',
       conversationHistory: 'Historikk',
@@ -36,6 +37,7 @@ const translation = {
         app: {
           name: 'Bedrock Chat',
           inputMessage: 'Send en melding',
+          pinnedBots: 'Faste boter',
           starredBots: 'Favorittbot',
           recentlyUsedBots: 'Nylig brukte boter',
           conversationHistory: 'Historikk',

frontend/src/i18n/pl/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Jak mogę pomóc?',
+      pinnedBots: 'Przypięte boty',
       starredBots: 'Ulubione Boty',
       recentlyUsedBots: 'Ostatnio używane Boty',
       conversationHistory: 'Historia',

frontend/src/i18n/pt-br/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Como posso te ajudar?',
+      pinnedBots: 'Bots Fixados',
       starredBots: 'Bots Favoritos',
       recentlyUsedBots: 'Bots Usados Recentemente',
       conversationHistory: 'Conversas Recentes',

frontend/src/i18n/th/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'ฉันช่วยอะไรคุณได้บ้าง?',
+      pinnedBots: 'บ็อตที่ปักหมุด',
       starredBots: 'บ็อตที่ถูกใจ',
       recentlyUsedBots: 'บ็อตที่ใช้งานล่าสุด',
       conversationHistory: 'ประวัติ',

frontend/src/i18n/vi/index.ts

@@ -8,6 +8,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: 'Tôi có thể giúp gì cho bạn?',
+      pinnedBots: 'Bot Ghim',
       starredBots: 'Bot Yêu Thích',
       recentlyUsedBots: 'Bot Đã Dùng Gần Đây',
       conversationHistory: 'Lịch sử',

frontend/src/i18n/zh-hans/index.ts

@@ -6,6 +6,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: '请输入',
+      pinnedBots: '置顶 Bots',
       starredBots: '我的 Bots 收藏',
       recentlyUsedBots: '最近使用过的 Bots',
       conversationHistory: '交谈纪录',

frontend/src/i18n/zh-hant/index.ts

@@ -6,6 +6,7 @@ const translation = {
     app: {
       name: 'Bedrock Chat',
       inputMessage: '請輸入訊息',
+      pinnedBots: '置頂 Bots',
       starredBots: '我的最愛 Bots',
       recentlyUsedBots: '最近用過的 Bots',
       conversationHistory: '交談紀錄',

frontend/src/layouts/AppContent.tsx

@@ -38,7 +38,7 @@ const AppContent: React.FC<Props> = (props) => {
     deleteConversation,
     clearConversations: clear,
   } = useConversation();
-  const { starredBots, recentlyUsedUnstarredBots } = useBot();
+  const { pinnedBots, starredBots, recentlyUsedUnstarredBots } = useBot();
   const { newChat, isGeneratedTitle } = useChat();
   const { isConversationOrNewChat, pathPattern } = usePageTitlePathPattern();
   const { isAdmin } = useLoginUser();
@@ -92,6 +92,7 @@ const AppContent: React.FC<Props> = (props) => {
     <div className="relative flex h-dvh w-screen bg-aws-paper-light dark:bg-aws-paper-dark">
       <Drawer
         isAdmin={isAdmin}
+        pinnedBots={pinnedBots}
         conversations={conversations}
         starredBots={starredBots}
         recentlyUsedUnstarredBots={recentlyUsedUnstarredBots}