Update app.py

app.py

@@ -15,46 +15,38 @@ st.subheader("生成されたテキストがリアルタイムで表示されま
 if 'conversation_history' not in st.session_state:
     st.session_state['conversation_history'] = []
 
-# ユーザー入力の受付
-user_input = st.text_input("質問を入力してください:")
-
-# Groq APIにリクエストを送信し、ストリーミング応答を取得する関数
-def get_groq_response(prompt):
-    response = client.chat.completions.create(
-        model="llama3-8b-8192",  # 適切なモデル名に置き換えてください
-        messages=[{"role": "user", "content": prompt}],
-        stream=True  # ストリーミングモードを有効にする
-    )
-    return response
-
 # 過去の会話履歴を表示
 for entry in st.session_state['conversation_history']:
-    st.text_area("会話履歴", value=entry, height=100, max_chars=None, key=None)
+    st.chat_message(entry['role']).markdown(entry['content'])
 
-# ユーザーが入力を送信した場合
-if user_input:
-    # ユーザーの入力を会話履歴に追加
-    st.session_state['conversation_history'].append(f"あなた: {user_input}")
+# ユーザー入力の受付
+if prompt := st.chat_input("質問を入力してください:"):
+    st.session_state['conversation_history'].append({"role": "user", "content": prompt})
+    st.chat_message("user").markdown(prompt)
     
     # Groq APIからの応答を取得
-    response = get_groq_response(user_input)
     response_text = ""
-    
-    # ストリーミングで部分的な応答をリアルタイムで表示
-    message_placeholder = st.empty()  # 応答の一時表示用の空要素
-    for chunk in response:
-        if "choices" in chunk:
-            chunk_text = chunk['choices'][0]['delta'].get('content', '')
-            response_text += chunk_text
-            message_placeholder.text(response_text)  # 部分的な応答を表示
-    
-    # 完全な応答を会話履歴に追加
-    st.session_state['conversation_history'].append(f"AI: {response_text}")
-    
-    # 最終的な応答も表示
-    st.text_area("AIからの応答:", value=response_text, height=200)
+    with st.chat_message("assistant"):
+        message_placeholder = st.empty()  # 応答の一時表示用の空要素
+        
+        response = client.chat.completions.create(
+            model="llama3-8b-8192",  # 適切なモデル名に置き換えてください
+            messages=[{"role": "user", "content": prompt}],
+            stream=True  # ストリーミングモードを有効にする
+        )
+        
+        # ストリーミングで部分的な応答をリアルタイムで表示
+        for chunk in response:
+            if "choices" in chunk:
+                chunk_text = chunk['choices'][0]['delta'].get('content', '')
+                response_text += chunk_text
+                message_placeholder.markdown(response_text + "|")  # 部分的な応答を表示
+        
+        # 最終的な応答を確定表示
+        message_placeholder.markdown(response_text)
+        st.session_state['conversation_history'].append({"role": "assistant", "content": response_text})
 
 # 会話履歴をリセットするボタン
 if st.button("会話をリセット"):
     st.session_state['conversation_history'] = []
-    st.query_params = {}
+    st.experimental_rerun()