fix

Author: tbrandaws

packages/web/public/locales/translation/en.yaml

@@ -32,6 +32,7 @@ chat:
   show_system_prompt: Show system prompt
   system_prompt: System Prompt
   title: Chat
+  view_prompt_examples: View Prompt Examples
 common:
   cancel: Cancel
   clear: Clear

packages/web/public/locales/translation/ja.yaml

@@ -30,6 +30,7 @@ chat:
   show_system_prompt: システムプロンプトの表示
   system_prompt: システムプロンプト
   title: チャット
+  view_prompt_examples: プロンプト例を見る
 common:
   cancel: キャンセル
   clear: クリア

packages/web/src/components/PromptList.tsx

@@ -32,6 +32,7 @@ type Props = BaseProps & {
     systemContextId: string,
     title: string
   ) => Promise<void>;
+  forceExpand: number | null;
 };
 
 const PromptList: React.FC<Props> = (props) => {
@@ -42,11 +43,29 @@ const PromptList: React.FC<Props> = (props) => {
   // PromptList is fixed for use on the chat page
   const { getModelId } = useChat('/chat');
   const modelId = getModelId();
+  const [previousForceExpanded, setPreviousForceExpanded] = useState<
+    number | null
+  >(null);
 
   const prompter = useMemo(() => {
     return getPrompter(modelId);
   }, [modelId]);
 
+  useEffect(() => {
+    if (
+      props.forceExpand !== null &&
+      previousForceExpanded !== props.forceExpand
+    ) {
+      setPreviousForceExpanded(props.forceExpand);
+      setExpanded(true);
+    }
+  }, [
+    props.forceExpand,
+    previousForceExpanded,
+    setPreviousForceExpanded,
+    setExpanded,
+  ]);
+
   // To access the upper setExpanded, nest the component
   const Item: React.FC<PromptListItem> = (props) => {
     const onClickPrompt = useCallback(() => {

packages/web/src/pages/ChatPage.tsx

@@ -157,6 +157,9 @@ const ChatPage: React.FC = () => {
   >(undefined);
   const [showSetting, setShowSetting] = useState(false);
   const { t } = useTranslation();
+  const [forceExpandPromptList, setForceExpandPromptList] = useState<
+    number | null
+  >(null);
 
   useEffect(() => {
     // On the conversation history page, do not change the system prompt even if the model is changed
@@ -433,12 +436,21 @@ const ChatPage: React.FC = () => {
         </div>
 
         {((isEmpty && !loadingMessages) || loadingMessages) && (
-          <div className="relative flex h-[calc(100vh-13rem)] flex-col items-center justify-center">
+          <div className="relative flex h-[calc(100vh-13rem)] flex-col items-center justify-center gap-y-4">
             <BedrockIcon
               className={`fill-gray-400 ${
                 loadingMessages ? 'animate-pulse' : ''
               }`}
             />
+
+            <Button
+              className="text-sm"
+              outlined
+              onClick={() => {
+                setForceExpandPromptList(Math.random());
+              }}>
+              {t('chat.view_prompt_examples')}
+            </Button>
           </div>
         )}
 
@@ -557,6 +569,7 @@ const ChatPage: React.FC = () => {
           systemContextList={systemContextList as SystemContext[]}
           onClickDeleteSystemContext={onClickDeleteSystemContext}
           onClickUpdateSystemContext={onClickUpdateSystemContext}
+          forceExpand={forceExpandPromptList}
         />
       )}