Set up

app.py

@@ -28,24 +28,14 @@ def chat_logic(session_id: str, user_input: str):
     if not any(m["role"] == "system" for m in session_memory_dict[session_id]):
         session_memory_dict[session_id].insert(0, system_prompt)
 
-    session_memory_dict[session_id].append({
-        "role": "user",
-        "content": user_input
-    })
-
-    completion = client.chat.completions.create(
+    session_memory_dict[session_id].append({"role": "user", "content": user_input})
+    res = client.chat.completions.create(
         model="llama3-8b-8192",
         messages=session_memory_dict[session_id]
     )
-
-    ai_response = completion.choices[0].message.content
-
-    session_memory_dict[session_id].append({
-        "role": "assistant",
-        "content": ai_response
-    })
-
-    print(f"[Session: {session_id}] AI Response: {ai_response}")
+    ai_response = res.choices[0].message.content
+    session_memory_dict[session_id].append({"role": "assistant", "content": ai_response})
+    print(f"[{session_id}] AI:", ai_response)
     return ai_response
 
 def chat_interface(user_input, chat_history, session_id):
@@ -58,64 +48,64 @@ def clear_session(session_id):
     return [], "gradio_default"
 
 with gr.Blocks(css="""
+.chatbot {
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  overflow-y: auto;
+  padding: 10px;
+}
+.chatbot .message {
+  width: fit-content;
+  max-width: 70%;
+  padding: 12px 16px;
+  margin: 6px 0;
+  border-radius: 12px;
+  line-height: 1.5;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
 .chatbot .message.user {
-    background-color: #007bff;
-    color: white;
-    padding: 12px;
-    border-radius: 12px;
-    max-width: 75%;
-    margin: 6px 0;
-    align-self: flex-end;
-    font-size: 15px;
+  background-color: #0069D9;
+  color: #fff;
+  align-self: flex-end;
 }
 .chatbot .message.bot {
-    background-color: #e9ecef;
-    color: #212529;
-    padding: 12px;
-    border-radius: 12px;
-    max-width: 75%;
-    margin: 6px 0;
-    align-self: flex-start;
-    font-size: 15px;
+  background-color: #f8f9fa;
+  color: #212529;
+  align-self: flex-start;
 }
-.chatbot {
-    font-family: 'Segoe UI', sans-serif;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
+.chat-container {
+  display: flex; flex-direction: column; height: 100%;
+}
+.input-row, .session-row {
+  display: flex; gap: 8px; align-items: center;
+}
+input, button {
+  font-size: 1rem;
 }
 """) as demo:
 
-    gr.Markdown("### 🤖 AI Chat Assistant (Powered by Groq LLaMA3)")
+    gr.Markdown("### 🤖 AI Chat Assistant (Clean & Responsive UI)")
 
     state = gr.State([])
-
-    with gr.Row():
-        user_input = gr.Textbox(label="Enter your message", placeholder="Ask anything...", lines=1)
-        send_btn = gr.Button("Send")
-
-    chatbot = gr.Chatbot(label="", elem_classes="chatbot")
-
-    with gr.Row():
+    # Input at top
+    with gr.Row(elem_classes="input-row"):
+        user_input = gr.Textbox(
+            label="", placeholder="Type your message here...", lines=1, interactive=True
+        )
+        send_btn = gr.Button("Send", variant="primary")
+
+    # Chat area
+    chatbot = gr.Chatbot(elem_classes="chatbot")
+
+    # Session controls at bottom
+    with gr.Row(elem_classes="session-row"):
         session_id = gr.Textbox(label="Session ID", value="gradio_default", interactive=True)
         clear_btn = gr.Button("Clear Chat")
 
-    send_btn.click(
-        fn=chat_interface,
-        inputs=[user_input, state, session_id],
-        outputs=[chatbot, user_input]
-    )
-
-    user_input.submit(
-        fn=chat_interface,
-        inputs=[user_input, state, session_id],
-        outputs=[chatbot, user_input]
-    )
-
-    clear_btn.click(
-        fn=clear_session,
-        inputs=[session_id],
-        outputs=[chatbot, session_id]
-    )
+    # Interaction wiring
+    send_btn.click(fn=chat_interface, inputs=[user_input, state, session_id], outputs=[chatbot, user_input])
+    user_input.submit(fn=chat_interface, inputs=[user_input, state, session_id], outputs=[chatbot, user_input])
+    clear_btn.click(fn=clear_session, inputs=[session_id], outputs=[chatbot, session_id])
 
-demo.launch()
+    demo.launch()