Skip to content

Commit 23726b9

Browse files
acharneskiacharneski
committed
fixes to discussable
1 parent e618537 commit 23726b9

File tree

10 files changed

+1570
-173
lines changed

10 files changed

+1570
-173
lines changed

‎webapp/src/components/MessageList.css‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
.message-list-container {
2+
flex: 1;
3+
overflow-y: auto;
4+
padding: 1rem;
5+
display: flex;
6+
flex-direction: column;
7+
gap: 1rem;
8+
scroll-behavior: smooth;
9+
transform: translate3d(0, 0, 0);
10+
backface-visibility: hidden;
11+
perspective: inherit;
12+
background-color: var(--theme-background, #ffffff);
13+
color: var(--theme-text, #000000);
14+
transition: background-color 0.3s ease, color 0.3s ease;
15+
}
16+
17+
.message-list-container[data-testid] {
18+
outline: none;
19+
}
20+
21+
.message-list-container::-webkit-scrollbar {
22+
width: 10px;
23+
}
24+
25+
.message-list-container::-webkit-scrollbar-track {
26+
background: var(--theme-background);
27+
border-radius: 4px;
28+
}
29+
30+
.message-list-container::-webkit-scrollbar-thumb {
31+
background: var(--theme-primary);
32+
border-radius: 4px;
33+
border: 2px solid var(--theme-background);
34+
}
35+
36+
.message-list-container::-webkit-scrollbar-thumb:hover {
37+
background: var(--theme-primary-dark);
38+
}
39+
40+
.message-content {
41+
color: inherit;
42+
background: transparent;
43+
transition: color 0.3s ease, background-color 0.3s ease;
44+
}
45+
46+
.message-content pre[class*="language-"],
47+
.message-content code[class*="language-"] {
48+
background: var(--theme-surface, #f5f5f5);
49+
color: var(--theme-text, #000000);
50+
font-family: var(--theme-code-font);
51+
border: 1px solid var(--theme-border, #e0e0e0);
52+
border-radius: 4px;
53+
}
54+
55+
.message-content .href-link,
56+
.message-content .play-button,
57+
.message-content .regen-button,
58+
.message-content .cancel-button,
59+
.message-content .text-submit-button {
60+
cursor: pointer;
61+
user-select: none;
62+
display: inline-block;
63+
margin: 2px;
64+
border-radius: 4px;
65+
background-color: var(--theme-surface);
66+
color: var(--theme-text);
67+
transition: all var(--transition-duration) var(--transition-timing),
68+
transform 0.2s ease-in-out;
69+
}
70+
71+
.message-content .href-link:hover,
72+
.message-content .play-button:hover,
73+
.message-content .regen-button:hover,
74+
.message-content .cancel-button:hover,
75+
.message-content .text-submit-button:hover {
76+
opacity: 0.8;
77+
background-color: var(--theme-primary);
78+
color: var(--theme-bg);
79+
transform: translateY(-1px);
80+
}
81+
82+
.message-content .referenced-message {
83+
cursor: pointer;
84+
padding: 4px;
85+
margin: 4px 0;
86+
border-left: 3px solid var(--theme-border);
87+
transition: all 0.3s ease;
88+
}
89+
90+
.message-content .referenced-message.expanded {
91+
background-color: var(--theme-surface);
92+
}
93+
94+
.message-item {
95+
padding: 1rem;
96+
border-radius: 12px;
97+
max-width: 80%;
98+
box-shadow: var(--theme-shadow-medium, 0 2px 4px rgba(0,0,0,0.1));
99+
transform: translate3d(0, 0, 0);
100+
transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
101+
position: relative;
102+
overflow: visible;
103+
backface-visibility: hidden;
104+
perspective: inherit;
105+
border: 1px solid var(--theme-border, #e0e0e0);
106+
}
107+
108+
.message-item:hover {
109+
transform: translate3d(0, -3px, 0);
110+
box-shadow: var(--theme-shadow-large, 0 4px 8px rgba(0,0,0,0.15));
111+
}
112+
113+
.message-item.user {
114+
align-self: flex-end;
115+
background-color: var(--theme-primary, #007AFF);
116+
color: var(--theme-text-on-primary, #ffffff);
117+
}
118+
119+
.message-item.system {
120+
align-self: flex-start;
121+
background-color: var(--theme-secondary, #5856D6);
122+
color: var(--theme-text-on-secondary, #ffffff);
123+
}
124+
125+
.message-item.error {
126+
align-self: flex-start;
127+
background: linear-gradient(135deg, var(--theme-error, #FF3B30), var(--theme-warning, #FF9500));
128+
color: var(--theme-text-on-error, #ffffff);
129+
}
130+
131+
.message-item.loading,
132+
.message-item.assistant,
133+
.message-item.reference {
134+
align-self: flex-start;
135+
background-color: var(--theme-surface, #f5f5f5);
136+
color: var(--theme-text, #000000);
137+
transition: background-color 0.3s ease, color 0.3s ease;
138+
}
139+
/* Reply form styling */
140+
.reply-form {
141+
display: flex;
142+
gap: 8px;
143+
margin-top: 8px;
144+
padding: 8px;
145+
background: var(--theme-surface-light, #fafafa);
146+
border-radius: 8px;
147+
}
148+
.reply-input {
149+
flex: 1;
150+
min-height: 36px;
151+
padding: 8px 12px;
152+
border: 1px solid var(--theme-border, #e0e0e0);
153+
border-radius: 4px;
154+
background: var(--theme-background, #ffffff);
155+
color: var(--theme-text, #000000);
156+
font-family: inherit;
157+
resize: vertical;
158+
transition: border-color 0.2s ease;
159+
}
160+
.reply-input:focus {
161+
outline: none;
162+
border-color: var(--theme-primary, #007AFF);
163+
}
164+
.text-submit-button {
165+
padding: 8px 16px;
166+
background-color: var(--theme-primary, #007AFF);
167+
color: var(--theme-text-on-primary, #ffffff);
168+
border: none;
169+
border-radius: 4px;
170+
cursor: pointer;
171+
font-weight: 500;
172+
transition: background-color 0.2s ease, transform 0.1s ease;
173+
}
174+
.text-submit-button:hover {
175+
background-color: var(--theme-primary-dark, #0056b3);
176+
transform: translateY(-1px);
177+
}
178+
.text-submit-button:active {
179+
transform: translateY(0);
180+
}

0 commit comments

Comments
 (0)