Update app.py

app.py

@@ -516,22 +516,8 @@ agent = smolagents.CodeAgent(
     verbosity_level=2,  # show steps in logs for class demo
 )
 
-# --- Page config ---
-st.set_page_config(page_title="TechSpark AI Assistant", layout="wide")
-
-# --- Sidebar ---
-with st.sidebar:
-    st.markdown("<h1 style='text-align:center; font-size:2.5em;'>❇️ TechSpark AI Assistant</h1>", unsafe_allow_html=True)
-    st.markdown('''
-    ## About
-    This app is a tech-powered AI chatbot built using:
-    - Streamlit
-    - smolagents for AI responses
-
-    ️ No API key required!
-    ''')
-    add_vertical_space(3)
-
+"""
+# --- Sidebar --
 import gradio as gr
 
 # Minimal Gradio chat
@@ -563,6 +549,149 @@ with gr.Blocks(title="TechSpark Agent") as demo:
     )
 
     inp.submit(respond, [inp, chat], [inp, chat])
+"""
+
+# --- Page config ---
+st.set_page_config(page_title="TechSpark AI Assistant", layout="wide")
+
+# --- Sidebar ---
+with st.sidebar:
+    st.markdown("<h1 style='text-align:center; font-size:2.5em;'>🤖 TechSpark AI Assistant</h1>", unsafe_allow_html=True)
+    st.markdown('''
+    ## About
+    This app is a tech-powered AI chatbot built using:
+    - Streamlit
+    - smolagents for AI responses
+
+    💡 No API key required!
+    ''')
+    add_vertical_space(3)
+
+
+
+
+# --- CSS FIXES: SIDEBAR WIDER + CHAT TEXT MUCH BIGGER ---
+st.markdown("""
+<style>
+
+/* --- MAIN CONTAINER FULL WIDTH --- */
+[data-testid="stAppViewContainer"] {
+    max-width: 100% !important;
+    padding-left: 10px !important;
+    padding-right: 40px !important;
+}
+
+/* --- SIDEBAR WIDTH + SMALLER SIDEBAR TEXT --- */
+section[data-testid="stSidebar"] {
+    width: 1.6 vw !important;
+}
+
+section[data-testid="stSidebar"] * {
+    font-size: .8 vw !important;
+}
+
+/* --- TITLES (untouched) --- */
+
+/* --- MASSIVE CHAT BUBBLES --- */
+div[data-testid="chat-message"] {
+    font-size: 5 vw !important;   /* HUGE readable text */
+    line-height: 2!important;
+    padding: 2vw 2.5vw !important; /* large padding */
+    border-radius: 2vw !important;
+    max-width: 70% !important;
+}
+
+/* USER MESSAGE */
+div[data-testid="chat-message-user"] {
+    margin-left: auto !important;
+    background: #00796b !important;
+    color: white !important;
+}
+
+/* ASSISTANT MESSAGE */
+div[data-testid="chat-message-assistant"] {
+    margin-right: auto !important;
+    background: #222 !important;
+    color: white !important;
+}
+
+/* --- INPUT BOX --- */
+.stTextInput textarea {
+    font-size: 2 vw !important;
+    padding: 1.4vw !important;
+    min-height: 8vh !important;
+    border-radius: 1.5vw !important;
+}
+
+/* --- SEND BUTTON --- */
+.stButton > button {
+    font-size: 2 vw !important;
+    padding: 1vw 2vw !important;
+    border-radius: 1.5vw !important;
+}
+
+
+#--SCALE---
+
+/* Global scale to simulate 120% zoom */
+html {
+    transform: scale(1.2);
+    transform-origin: top center;
+}
+
+/* Prevent horizontal scrollbar after scaling */
+body, .stApp {
+    width: 83.33%; /* 1 / 1.2 */
+    margin: 0 auto;
+}
+
+</style>
+""", unsafe_allow_html=True)
+
+
+# --- Centered main title ---
+
+st.markdown("<h1 class='main-title' style='text-align:center;'>TechSpark AI Assistant</h1>", unsafe_allow_html=True)
+st.markdown("<h2 class='sub-title' style='text-align:center;'>Ask me anything about TechSpark — </h2>", unsafe_allow_html=True)
+
+
+# --- Initialize chat history ---
+if 'generated' not in st.session_state:
+    st.session_state['generated'] = ["Hi! I'm your AI assistant. How can I help you today?"]
+if 'past' not in st.session_state:
+    st.session_state['past'] = ["Hi!"]
+
+# --- Layout containers ---
+input_container = st.container()
+colored_header(label='', description='', color_name='blue-30')
+response_container = st.container()
+
+# --- User input ---
+def get_text():
+    input_text = st.text_input("You:", "", key="input", placeholder="Type your message here...")
+    return input_text
+
+with input_container:
+    user_input = get_text()
+
+# --- Generate AI response ---
+def generate_response(prompt):
+    try:
+        return str(smolagents.agent(prompt))
+    except Exception as e:
+        return f"[Error] {e}"
+
+# --- Display responses ---
+with response_container:
+    if user_input:
+        response = generate_response(user_input)
+        st.session_state.past.append(user_input)
+        st.session_state.generated.append(response)
+
+    if st.session_state['generated']:
+        for i in range(len(st.session_state['generated'])):
+            message(st.session_state['past'][i], is_user=True, key=f"{i}_user")
+            message(st.session_state['generated'][i], key=f"{i}_assistant")
 
 
 demo.launch(debug=True)