diff --git a/src/App.tsx b/src/App.tsx index c6d0294..0d61a2d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,15 +44,8 @@ export default function App() { height: '40px', border: '3px solid var(--border)', borderTopColor: 'var(--accent)', - borderRadius: '50%', - animation: 'spin 1s linear infinite' + borderRadius: '50%' }} /> - - Loading... @@ -72,11 +65,11 @@ export default function App() { zIndex: 100, background: 'var(--bg-secondary)', border: '1px solid var(--border)', - fontSize: '20px' + fontSize: '18px' }} title="Open Menu" > - ☰ + Menu { - const role = msg.role === 'user' ? '👤 User' : '🤖 Assistant' - content += `### ${role}\n\n${msg.content}\n\n` + const role = msg.role === 'user' ? 'User' : 'Assistant' + content += `## ${role}\n\n${msg.content}\n\n` }) // Create and download file @@ -161,14 +161,15 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) { height: '100vh', backgroundColor: 'var(--bg-primary)' }}> - {/* Header */} + {/* Header - Added padding-left to avoid overlap with menu button */}

- đŸ“Ĩ Export + Export

@@ -235,11 +236,10 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) { textAlign: 'center', padding: '40px' }}> -
đŸ’Ŧ

Welcome to Light Chat

-

Open the menu (☰) to create a session

+

Open the menu to create a session

) : session.messages.length === 0 ? (
-
👋

Start the conversation

@@ -264,8 +263,7 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) { key={index} style={{ display: 'flex', - justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start', - animation: 'fadeIn 0.3s ease-out' + justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start' }} >
- {msg.role === 'user' ? '👤 You' : '🤖 Assistant'} + {msg.role === 'user' ? 'You' : 'Assistant'}
- 🤖 Assistant + Assistant
- Thinking...
)} @@ -392,7 +375,7 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) { borderRadius: 'var(--radius-md)', border: '1px solid var(--error)' }}> - âš ī¸ {error} + {error}
)}
@@ -414,7 +397,7 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) { type="text" value={input} onChange={(e) => setInput(e.target.value)} - placeholder={config.endpoint ? "Type your message..." : "Configure API endpoint in menu (☰) first"} + placeholder={config.endpoint ? "Type your message..." : "Configure API endpoint in menu first"} disabled={isLoading || !session} style={{ flex: 1, @@ -430,7 +413,7 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) { className="danger" style={{ padding: '14px 20px' }} > - âšī¸ Stop + Stop ) : ( )} diff --git a/src/components/SessionDrawer.test.tsx b/src/components/SessionDrawer.test.tsx index 1014c51..ec64c1f 100644 --- a/src/components/SessionDrawer.test.tsx +++ b/src/components/SessionDrawer.test.tsx @@ -22,7 +22,7 @@ describe('SessionDrawer', () => { it('should render when open', () => { render() - expect(screen.getByText(/Your Sessions/)).toBeInTheDocument() + expect(screen.getByText('Sessions')).toBeInTheDocument() expect(screen.getByRole('button', { name: /New Session/i })).toBeInTheDocument() }) diff --git a/src/components/SessionDrawer.tsx b/src/components/SessionDrawer.tsx index 784ae93..e0d5b7b 100644 --- a/src/components/SessionDrawer.tsx +++ b/src/components/SessionDrawer.tsx @@ -82,7 +82,7 @@ export function SessionDrawer({ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)', transform: isOpen ? 'translateX(0)' : 'translateX(-100%)', - transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)', + transition: 'transform 0.3s ease', zIndex: 1000, display: 'flex', flexDirection: 'column', @@ -100,12 +100,9 @@ export function SessionDrawer({

- đŸ’Ŧ Sessions + Sessions

))} diff --git a/src/index.css b/src/index.css index efc17bf..6693ea6 100644 --- a/src/index.css +++ b/src/index.css @@ -14,12 +14,12 @@ --success: #10b981; --error: #ef4444; --warning: #f59e0b; - --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); + --shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; - --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition: all 0.15s ease; } * { @@ -42,9 +42,9 @@ body { width: 100%; } -/* Modern Button Styles */ +/* Button Styles - No Animations */ button { - background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); + background: var(--accent); color: white; border: none; padding: 10px 20px; @@ -55,48 +55,15 @@ button { letter-spacing: 0.3px; transition: var(--transition); box-shadow: var(--shadow); - position: relative; - overflow: hidden; -} - -button::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.2), - transparent - ); - transition: left 0.5s; -} - -button:hover::before { - left: 100%; } button:hover { - transform: translateY(-1px); - box-shadow: var(--shadow-lg); -} - -button:active { - transform: translateY(0); + background: var(--accent-hover); } button:disabled { opacity: 0.5; cursor: not-allowed; - transform: none; - box-shadow: none; -} - -button:disabled::before { - display: none; } /* Secondary Button Style */ @@ -112,7 +79,11 @@ button.secondary:hover { /* Danger Button Style */ button.danger { - background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%); + background: var(--error); +} + +button.danger:hover { + background: #dc2626; } /* Icon Button Style */ @@ -123,7 +94,7 @@ button.icon-btn { display: flex; align-items: center; justify-content: center; - font-size: 18px; + font-size: 16px; } /* Small Button */ @@ -137,11 +108,10 @@ button.small { button.toggle { background: var(--bg-tertiary); border: 2px solid var(--border); - position: relative; } button.toggle.active { - background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); + background: var(--accent); border-color: var(--accent); } @@ -161,7 +131,6 @@ input, textarea { input:focus, textarea:focus { outline: none; border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } input::placeholder, textarea::placeholder { @@ -191,31 +160,3 @@ input:disabled, textarea:disabled { ::-webkit-scrollbar-thumb:hover { background: var(--border-light); } - -/* Animations */ -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -@keyframes slideIn { - from { transform: translateX(-100%); } - to { transform: translateX(0); } -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.animate-fadeIn { - animation: fadeIn 0.3s ease-out; -} - -.animate-slideIn { - animation: slideIn 0.3s ease-out; -} - -.animate-pulse { - animation: pulse 1.5s ease-in-out infinite; -}