Shows waiting indicator until LLM response is returned

package.json

@@ -41,6 +41,7 @@
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-icons": "^5.0.1",
+ "react-loader-spinner": "^6.1.6",
  "react-markdown": "^9.0.1",
  "react-spotify-embed": "^2.0.4",
  "sanitize-html": "^2.12.1",

src/app/question/page.tsx

@@ -1,13 +1,18 @@
 'use client'
 
-import { useChat } from 'ai/react'
+import { Message, useChat } from 'ai/react'
 import { FiSmile } from "react-icons/fi";
 import { RiRobot2Line } from "react-icons/ri";
 import ReactMarkdown from "react-markdown";
+import { Comment } from "react-loader-spinner";
 
 import '@/app/layout.css'
 import styles from '@/app/question/page.module.css';
 
+const isLastMessageFromAssistant = (messages: Message[]) => {
+ return messages.length > 0 && messages.at(-1)?.role !== "user";
+}
+
 export default function Page() {
  const { messages, isLoading, input, handleInputChange, handleSubmit } = useChat();
 
@@ -25,6 +30,12 @@ export default function Page() {
  <ReactMarkdown>{message.content}</ReactMarkdown>
  </div>
  ))}
+ {isLoading && !isLastMessageFromAssistant(messages) &&
+ <div className={styles.message}>
+ <RiRobot2Line /><span>AIディレクター</span>
+ <p><Comment height={32} width={32} backgroundColor="#676767" /></p>
+ </div>
+ }
  <form onSubmit={handleSubmit} className={styles.form}>
  <input
  className={styles.input}