@@ -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;
-}