Skip to content

Commit a594987

Browse files
Fr4nc3Fr4nc3
committed
update coral from enunsoo 1.0.0
1 parent a65686c commit a594987

19 files changed

Lines changed: 2572 additions & 187 deletions

File tree

‎src/frontend_react/src/coral/components/Content/Chat.css‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
Chat container and layout
2+
.chat-container {
3+
display: flex;
4+
flex-direction: column;
5+
height: 100%;
6+
background-color: var(--colorNeutralBackground1);
7+
}
8+
9+
/* Messages area */
10+
.messages-container {
11+
flex: 1;
12+
overflow-y: auto;
13+
padding: 24px;
14+
}
15+
16+
/* Input area */
17+
.input-wrapper {
18+
position: sticky;
19+
bottom: 0;
20+
left: 0;
21+
right: 0;
22+
background-color: var(--colorNeutralBackground1);
23+
border-top: 1px solid var(--colorNeutralStroke1);
24+
padding: 16px 24px;
25+
}
26+
27+
.input-container {
28+
display: flex;
29+
gap: 8px;
30+
align-items: flex-start;
31+
max-width: 800px;
32+
margin: 0 auto;
33+
}
34+
35+
/* Message styling */
36+
.message {
37+
display: flex;
38+
flex-direction: column;
39+
margin-bottom: 24px;
40+
max-width: 800px;
41+
margin-left: auto;
42+
margin-right: auto;
43+
}
44+
45+
.message-content {
46+
line-height: 1.5;
47+
white-space: pre-wrap;
48+
padding: 12px 16px;
49+
border-radius: 8px;
50+
margin-top: 4px;
51+
}
52+
53+
.message-header {
54+
display: flex;
55+
align-items: center;
56+
gap: 8px;
57+
margin-bottom: 4px;
58+
}
59+
60+
.message-role {
61+
font-weight: 600;
62+
font-size: 14px;
63+
}
64+
65+
.bot-tag {
66+
font-size: 11px;
67+
color: var(--colorNeutralForeground2);
68+
background-color: var(--colorNeutralBackground2);
69+
padding: 2px 6px;
70+
border-radius: 4px;
71+
text-transform: uppercase;
72+
}
73+
74+
/* User message */
75+
.message.user .message-content {
76+
background-color: var(--colorBrandBackground);
77+
color: var(--colorNeutralForegroundInverted);
78+
align-self: flex-end;
79+
}
80+
81+
/* Assistant/bot message */
82+
.message.assistant .message-content {
83+
background-color: var(--colorNeutralBackground2);
84+
color: var(--colorNeutralForeground1);
85+
align-self: flex-start;
86+
}
87+
88+
/* Message actions */
89+
.message-actions {
90+
display: flex;
91+
gap: 8px;
92+
margin-top: 8px;
93+
}
94+
95+
.action-button {
96+
background: none;
97+
border: none;
98+
cursor: pointer;
99+
color: var(--colorNeutralForeground3);
100+
padding: 4px;
101+
display: flex;
102+
align-items: center;
103+
justify-content: center;
104+
border-radius: 4px;
105+
}
106+
107+
.action-button:hover {
108+
background-color: var(--colorNeutralBackground2);
109+
}
110+
111+
.message-content p {
112+
margin: 0 0 16px 0;
113+
}
114+
115+
.message-content p:last-child {
116+
margin-bottom: 0;
117+
}
118+
119+
/* System message / action */
120+
.message.system {
121+
display: flex;
122+
justify-content: center;
123+
margin: 16px 0;
124+
}
125+
126+
.system-message {
127+
background-color: var(--colorNeutralBackground2);
128+
padding: 8px 16px;
129+
border-radius: 16px;
130+
font-size: 14px;
131+
color: var(--colorNeutralForeground2);
132+
display: inline-block;
133+
}
134+
135+
/* Code block styling */
136+
.message-content pre {
137+
background-color: rgba(0, 0, 0, 0.05);
138+
padding: 16px;
139+
border-radius: 4px;
140+
overflow-x: auto;
141+
margin: 16px 0;
142+
}
143+
144+
.message.assistant .message-content pre {
145+
background-color: rgba(0, 0, 0, 0.1);
146+
}
147+
148+
.message.user .message-content pre {
149+
background-color: rgba(255, 255, 255, 0.1);
150+
}
151+
152+
.message-content code {
153+
font-family: var(--fontFamilyMonospace);
154+
font-size: 14px;
155+
}
156+
157+
/* Typing indicator */
158+
.typing-indicator {
159+
display: flex;
160+
align-items: center;
161+
gap: 8px;
162+
color: var(--colorNeutralForeground2);
163+
font-size: 14px;
164+
}
165+
166+
/* Scroll to bottom button */
167+
.scroll-button {
168+
position: fixed;
169+
bottom: 100px;
170+
right: 24px;
171+
z-index: 1;
172+
}
173+
174+
/* Input field */
175+
.input-field {
176+
flex: 1;
177+
padding: 12px 16px;
178+
border: 1px solid var(--colorNeutralStroke1);
179+
border-radius: 8px;
180+
resize: none;
181+
font-family: var(--fontFamilyBase);
182+
font-size: var(--fontSizeBase300);
183+
line-height: 1.5;
184+
background-color: var(--colorNeutralBackground1);
185+
color: var(--colorNeutralForeground1);
186+
min-height: 44px;
187+
overflow-y: auto;
188+
max-height: 200px;
189+
}
190+
191+
.input-field:focus {
192+
outline: none;
193+
border-color: var(--colorBrandStroke1);
194+
}
195+
196+
.input-field::placeholder {
197+
color: var(--colorNeutralForeground3);
198+
}
199+
200+
/* Send button */
201+
.send-button {
202+
display: flex;
203+
align-items: center;
204+
justify-content: center;
205+
width: 40px;
206+
height: 40px;
207+
border-radius: 8px;
208+
background-color: var(--colorBrandBackground);
209+
color: var(--colorNeutralForegroundInverted);
210+
border: none;
211+
cursor: pointer;
212+
font-size: 16px;
213+
}
214+
215+
.send-button svg {
216+
width: 20px;
217+
height: 20px;
218+
fill: currentColor;
219+
}
220+
221+
.send-button:disabled {
222+
background-color: var(--colorNeutralBackground3);
223+
color: var(--colorNeutralForeground3);
224+
cursor: not-allowed;
225+
}
226+
227+
/* Input footer */
228+
.input-footer {
229+
display: flex;
230+
justify-content: space-between;
231+
align-items: center;
232+
margin-top: 8px;
233+
padding: 0 16px;
234+
font-size: 12px;
235+
color: var(--colorNeutralForeground3);
236+
}
237+
238+
/* Markdown content */
239+
.markdown-content {
240+
width: 100%;
241+
}
242+
243+
.markdown-content > *:first-child {
244+
margin-top: 0;
245+
}
246+
247+
.markdown-content > *:last-child {
248+
margin-bottom: 0;
249+
}

0 commit comments

Comments
 (0)