Update app.py

app.py

@@ -6,7 +6,7 @@ import numpy as np
 import json
 from sentence_transformers import SentenceTransformer
 
-# Load content
+# Load context
 with open("texts.json", "r", encoding="utf-8") as f:
     texts = json.load(f)
 
@@ -29,24 +29,19 @@ def chat_fn(message, history):
 
     context = get_context(message)
 
-    system_prompt = f"""You are Codex Assistant by LogIQ Curve — a helpful and humanlike AI. 
+    system_prompt = f"""You are Codex Assistant by LogIQ Curve — a helpful and humanlike AI.
 Avoid robotic language. Respond using the following information:
 
 {context}
 """
 
     messages = [{"role": "system", "content": system_prompt}]
-
     for user, assistant in history:
         messages.append({"role": "user", "content": user})
         messages.append({"role": "assistant", "content": assistant})
-
     messages.append({"role": "user", "content": message})
 
-    payload = {
-        "model": MODEL,
-        "messages": messages
-    }
+    payload = {"model": MODEL, "messages": messages}
 
     try:
         response = requests.post("https://openrouter.ai/api/v1/chat/completions", headers=headers, json=payload)
@@ -57,76 +52,68 @@ Avoid robotic language. Respond using the following information:
 
     return reply
 
-# 💅 Custom CSS for clean layout, correct colors, full-screen responsiveness
 custom_css = """
 * {
-    font-family: 'Segoe UI', sans-serif;
-    box-sizing: border-box;
+  font-family: 'Segoe UI', sans-serif;
 }
-body, html, #root {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+#chat-window {
+  background: linear-gradient(to bottom right, #f9f9f9, #e0e7ff);
+  padding: 20px;
+  height: 80vh;
+  overflow-y: auto;
+  border-radius: 12px;
+  box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
 }
-footer, button[data-testid="settings-button"] {
-    display: none !important;
+.message {
+  padding: 12px 18px;
+  margin: 10px 0;
+  border-radius: 18px;
+  max-width: 75%;
+  word-wrap: break-word;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
+  transition: 0.3s;
 }
-#chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
+.message.user {
+  background-color: #4F46E5;
+  color: white;
+  align-self: flex-end;
+  border-bottom-right-radius: 4px;
 }
-#chat-window {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-    background-color: #f9f9f9;
+.message.ai {
+  background-color: #ffffff;
+  color: #111;
+  align-self: flex-start;
+  border-bottom-left-radius: 4px;
 }
 #input-row {
-    display: flex;
-    padding: 12px;
-    border-top: 1px solid #ccc;
-    background-color: #fff;
+  display: flex;
+  padding: 12px;
+  background: white;
+  border-top: 1px solid #ddd;
 }
 textarea {
-    flex: 1;
-    resize: none;
-    padding: 12px;
-    font-size: 16px;
-    border-radius: 8px;
-    border: 1px solid #ccc;
-    line-height: 1.4;
-    max-height: 80px;
-    overflow-y: auto;
+  flex: 1;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  font-size: 16px;
+  resize: none;
 }
 button {
-    margin-left: 10px;
-    padding: 0 20px;
-}
-.message {
-    max-width: 80%;
-    padding: 10px 14px;
-    border-radius: 12px;
-    margin: 6px 0;
-    line-height: 1.5;
-    word-wrap: break-word;
-}
-.message.user {
-    align-self: flex-end;
-    background-color: #daf0ff;
-    color: #000;
-}
-.message.ai {
-    align-self: flex-start;
-    background-color: #eeeeee;
-    color: #111;
+  margin-left: 10px;
+  border-radius: 10px;
+  background-color: #4F46E5;
+  color: white;
+  font-weight: bold;
+  padding: 0 20px;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
 }
 """
 
 with gr.Blocks(css=custom_css) as demo:
     chatbot_state = gr.State([])
 
-    with gr.Column(elem_id="chat-container"):
+    with gr.Column():
         chatbox = gr.HTML('<div id="chat-window"></div>', elem_id="chat-window")
         with gr.Row(elem_id="input-row"):
             msg = gr.Textbox(
@@ -146,7 +133,6 @@ with gr.Blocks(css=custom_css) as demo:
         html = ""
         for role, content in state:
             html += f'<div class="message {role}">{content}</div>'
-
         return html, state, ""
 
     send.click(respond, [msg, chatbot_state], [chatbox, chatbot_state, msg])