Update app.py

app.py

@@ -8,70 +8,142 @@ def chat_respond(message, history):
     return format_history(history), history, ""
 
 def format_history(history):
-    html = "<div style='padding: 16px;'>"
+    html = "<div class='chat-container'>"
     for i in range(0, len(history) - 1, 2):
         user = history[i].replace("User: ", "")
         bot = history[i+1].replace("Kossistant: ", "")
         html += f"""
-        <div style='margin-bottom: 20px;'>
-            <div style='text-align: right;'>
-                <span style='background-color:#0F9D58; color: white; padding:10px 14px;
-                             border-radius:20px; display:inline-block; max-width:75%;
-                             word-break: break-word;'>{user}</span>
-            </div>
-            <div style='text-align: left;'>
-                <span style='background-color:#3C4043; color: white; padding:10px 14px;
-                             border-radius:20px; display:inline-block; max-width:75%;
-                             word-break: break-word;'>{bot}</span>
-            </div>
+        <div class='message user'>
+            <div class='bubble user-bubble'>{user}</div>
+        </div>
+        <div class='message bot'>
+            <div class='bubble bot-bubble'>{bot}</div>
         </div>
         """
     html += "</div>"
     return html
 
 with gr.Blocks(css="""
+    * {
+        box-sizing: border-box;
+    }
     body {
         background-color: #121212;
+        font-family: 'Segoe UI', 'Pretendard', sans-serif;
         color: white;
-        font-family: 'Segoe UI', sans-serif;
+        margin: 0;
+        padding: 0;
     }
     .gradio-container {
         background-color: #121212 !important;
+    }
+    h1 {
+        text-align: center;
+        color: #00ffcc;
+        margin-top: 20px;
+    }
+    .chat-container {
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        max-height: 70vh;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+    }
+    .message {
+        display: flex;
+        flex-direction: column;
+    }
+    .user {
+        align-items: flex-end;
+    }
+    .bot {
+        align-items: flex-start;
+    }
+    .bubble {
+        max-width: 80%;
+        padding: 12px 16px;
+        border-radius: 20px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+    }
+    .user-bubble {
+        background-color: #0F9D58;
         color: white;
+        border-bottom-right-radius: 0;
     }
-    .chat-wrapper {
-        background-color: #1E1E1E;
-        border-radius: 16px;
-        padding: 20px;
-        max-width: 720px;
-        margin: 0 auto;
-        margin-top: 40px;
-        box-shadow: 0 0 10px rgba(0,0,0,0.4);
+    .bot-bubble {
+        background-color: #3C4043;
+        color: white;
+        border-bottom-left-radius: 0;
     }
     textarea, input[type="text"] {
         background-color: #2C2C2C !important;
         color: white !important;
         border: 1px solid #444 !important;
-        border-radius: 10px !important;
-        padding: 10px !important;
+        border-radius: 12px !important;
+        padding: 12px !important;
+        font-size: 1rem;
     }
     button {
         background-color: #0F9D58 !important;
         color: white !important;
         border: none !important;
-        border-radius: 10px !important;
-        padding: 10px 16px !important;
+        border-radius: 12px !important;
+        padding: 12px 16px !important;
+        font-weight: bold;
+        font-size: 1rem;
     }
     button:hover {
         background-color: #0c7a46 !important;
     }
+    .chat-wrapper {
+        background-color: #1E1E1E;
+        border-radius: 20px;
+        padding: 20px;
+        max-width: 720px;
+        margin: 0 auto;
+        box-shadow: 0 0 12px rgba(0,0,0,0.5);
+    }
+    @media screen and (max-width: 768px) {
+        .chat-wrapper {
+            padding: 12px;
+            border-radius: 0;
+        }
+        .chat-container {
+            padding: 8px;
+        }
+        .bubble {
+            font-size: 0.95rem;
+        }
+        textarea, input[type="text"] {
+            font-size: 1rem !important;
+        }
+        button {
+            font-size: 1rem !important;
+        }
+    }
+    ::-webkit-scrollbar {
+        width: 6px;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: #444;
+        border-radius: 3px;
+    }
+    ::selection {
+        background: #00b894;
+        color: white;
+    }
 """) as demo:
+
+    gr.HTML("<h1>Kossistant 챗봇</h1>")
     
-    gr.HTML("<h1 style='text-align:center;'>Kossistant 챗봇</h1>")
     with gr.Column(elem_classes="chat-wrapper"):
         chatbox = gr.HTML(value="", label="대화")
         with gr.Row():
-            msg = gr.Textbox(placeholder="질문을 입력하세요", lines=1, scale=8)
+            msg = gr.Textbox(placeholder="메시지를 입력하세요", lines=1, scale=8)
             send_button = gr.Button("전송", scale=2)
 
     state = gr.State([])