Merge pull request aws-samples#485 from aws-samples/add-ladle-stories

Add Ladle stories, and performed some refactoring

frontend/src/components/AppContent.tsx

@@ -1,43 +1,122 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import ChatListDrawer from './ChatListDrawer';
 import { BaseProps } from '../@types/common';
+import { ConversationMeta } from '../@types/conversation';
 import LazyOutputText from './LazyOutputText';
 import { PiList, PiPlus } from 'react-icons/pi';
 import ButtonIcon from './ButtonIcon';
 import SnackbarProvider from '../providers/SnackbarProvider';
 import { Outlet } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import useDrawer from '../hooks/useDrawer';
 import useConversation from '../hooks/useConversation';
+import useBot from '../hooks/useBot';
 import useChat from '../hooks/useChat';
 import { usePageLabel, usePageTitlePathPattern } from '../routes';
+import useUser from '../hooks/useUser';
+import DialogConfirmDeleteChat from './DialogConfirmDeleteChat';
+import DialogConfirmClearConversations from './DialogConfirmClearConversations';
+import DialogSelectLanguage from './DialogSelectLanguage';
 
 type Props = BaseProps & {
   signOut?: () => void;
 };
 
 const AppContent: React.FC<Props> = (props) => {
+  const { i18n } = useTranslation();
   const { getPageLabel } = usePageLabel();
   const { switchOpen: switchDrawer } = useDrawer();
   const navigate = useNavigate();
   const { conversationId } = useParams();
-  const { getTitle } = useConversation();
-  const { isGeneratedTitle } = useChat();
+  const { conversations, getTitle, updateTitle, deleteConversation, clearConversations: clear } = useConversation();
+  const { starredBots, recentlyUsedUnsterredBots } = useBot();
+  const { newChat, isGeneratedTitle } = useChat();
   const { isConversationOrNewChat, pathPattern } = usePageTitlePathPattern();
+  const { isAdmin } = useUser();
 
   const onClickNewChat = useCallback(() => {
     navigate('/');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const [isOpenDeleteChat, setIsOpenDeleteChat] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<
+    ConversationMeta | undefined
+  >();
+
+  const deleteChat = useCallback(
+    (conversationId: string) => {
+      deleteConversation(conversationId).then(() => {
+        newChat();
+        navigate('');
+        setIsOpenDeleteChat(false);
+        setDeleteTarget(undefined);
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const [isOpenClearConversations, setIsOpenClearConversations] = useState(false);
+
+  const clearConversations = useCallback(
+    () => {
+      clear().then(() => {
+        navigate('');
+        setIsOpenClearConversations(false);
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const [isOpenSelectLangage, setIsOpenSelectLangage] = useState(false);
+
   return (
     <div className="relative flex h-dvh w-screen bg-aws-paper">
       <ChatListDrawer
+        isAdmin={isAdmin}
+        conversations={conversations}
+        starredBots={starredBots}
+        recentlyUsedUnsterredBots={recentlyUsedUnsterredBots}
+        updateConversationTitle={async (conversationId, title) => {
+          await updateTitle(conversationId, title);
+        }}
         onSignOut={() => {
           props.signOut ? props.signOut() : null;
         }}
+        onDeleteConversation={(conversation) => {
+          setIsOpenDeleteChat(true);
+          setDeleteTarget(conversation);
+        }}
+        onClearConversations={() => setIsOpenClearConversations(true)}
+        onSelectLanguage={() => setIsOpenSelectLangage(true)}
+      />
+      <DialogConfirmDeleteChat
+        isOpen={isOpenDeleteChat}
+        target={deleteTarget}
+        onDelete={deleteChat}
+        onClose={() => setIsOpenDeleteChat(false)}
+      />
+      <DialogConfirmClearConversations
+        isOpen={isOpenClearConversations}
+        onClose={() => {
+          setIsOpenClearConversations(false);
+        }}
+        onDelete={clearConversations}
+      />
+      <DialogSelectLanguage
+        isOpen={isOpenSelectLangage}
+        initialLanguage={i18n.language}
+        onSelectLanguage={(language) => {
+          i18n.changeLanguage(language);
+          setIsOpenSelectLangage(false);
+        }}
+        onClose={() => {
+          setIsOpenSelectLangage(false);
+        }}
       />
-
 
       <main className="min-h-dvh relative flex flex-col flex-1 overflow-y-hidden transition-width">
 

frontend/src/components/ChatListDrawer.stories.tsx

@@ -0,0 +1,91 @@
+import type { Story, StoryDefault } from '@ladle/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import ChatListDrawer from "./ChatListDrawer";
+import { BotListItem } from '../@types/bot';
+import { ConversationMeta } from '../@types/conversation';
+
+const conversations: ConversationMeta[] = [
+  {
+    id: '1',
+    title: 'What is RAG?',
+    createTime: new Date().getTime(),
+    lastMessageId: '',
+    model: 'claude-v3.5-sonnet',
+    botId: '1',
+  },
+];
+const bots: BotListItem[] = [
+  {
+    id: '1',
+    title: 'Bot 1',
+    description: 'Bot 1',
+    createTime: new Date(),
+    lastUsedTime: new Date(),
+    isPublic: false,
+    isPinned: false,
+    owned: false,
+    syncStatus: 'SUCCEEDED',
+    available: true,
+  },
+  {
+    id: '2',
+    title: 'Bot 2',
+    description: 'Bot 2',
+    createTime: new Date(),
+    lastUsedTime: new Date(),
+    isPublic: true,
+    isPinned: true,
+    owned: true,
+    syncStatus: 'SUCCEEDED',
+    available: true,
+  },
+];
+
+export default {
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<Story />} />
+          <Route path="/bot/:botId" element={<Story />} />
+          <Route path="/bot/explore" element={<Story />} />
+          <Route path="/:conversationId" element={<Story />} />
+          <Route path="/admin/shared-bot-analytics" element={<Story />} />
+          <Route path="/admin/api-management" element={<Story />} />
+        </Routes>
+      </MemoryRouter>
+    ),
+  ],
+} satisfies StoryDefault;
+
+export const Admin: Story = () => {
+  return (
+    <ChatListDrawer
+      isAdmin={true}
+      conversations={conversations}
+      starredBots={bots.filter(bot => bot.isPinned)}
+      recentlyUsedUnsterredBots={bots.filter(bot => !bot.isPinned)}
+      updateConversationTitle={async () => {}}
+      onSignOut={() => {}}
+      onDeleteConversation={() => {}}
+      onClearConversations={() => {}}
+      onSelectLanguage={() => {}}
+    />
+  );
+};
+
+export const NonAdmin: Story = () => {
+  return (
+    <ChatListDrawer
+      isAdmin={false}
+      conversations={conversations}
+      starredBots={bots.filter(bot => bot.isPinned)}
+      recentlyUsedUnsterredBots={bots.filter(bot => !bot.isPinned)}
+      updateConversationTitle={async () => {}}
+      onSignOut={() => {}}
+      onDeleteConversation={() => {}}
+      onClearConversations={() => {}}
+      onSelectLanguage={() => {}}
+    />
+  );
+};