Skip to content

Commit ddcf5e6

Browse files
acharneskiacharneski
committed
ids
1 parent 66a66d3 commit ddcf5e6

File tree

7 files changed

+774
-38
lines changed

7 files changed

+774
-38
lines changed

‎webapp/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
4646
import QRCode from 'qrcode-generator';
4747
import {addMessage} from "./store/slices/messageSlice";
4848
import {Message} from './types/messages';
49+
50+
4951
// Add function to extract archived messages
5052
const getArchivedMessages = () => {
5153
if (!isArchive) return null;

‎webapp/src/components/ChatInterface.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,13 @@ const ChatContainer = styled.div`
2828
display: flex;
2929
flex-direction: column;
3030
height: 100vh;
31+
/* Add test id */
32+
&[data-testid] {
33+
outline: none;
34+
}
3135
`;
3236

33-
const ChatInterface: React.FC<ChatInterfaceProps> = ({
37+
const ChatInterface: React.FC<ChatInterfaceProps> = ({
3438
sessionId: propSessionId,
3539
websocket,
3640
isConnected,
@@ -169,11 +173,11 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({
169173
};
170174

171175
return isArchive ? (
172-
<ChatContainer>
176+
<ChatContainer data-testid="chat-container" id="chat-container">
173177
<MessageList/>
174178
</ChatContainer>
175179
) : (
176-
<ChatContainer>
180+
<ChatContainer data-testid="chat-container" id="chat-container">
177181
<MessageList/>
178182
<InputArea onSendMessage={handleSendMessage}/>
179183
</ChatContainer>

‎webapp/src/components/InputArea.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ interface InputContainerProps {
2222
const InputContainer = styled.div<InputContainerProps>`
2323
padding: 1.5rem;
2424
background-color: ${(props) => props.theme.colors.surface};
25+
/* Add test id */
26+
&[data-testid] {
27+
outline: none;
28+
}
2529
border-top: 1px solid ${(props) => props.theme.colors.border};
2630
display: ${({theme, $hide}) => $hide ? 'none' : 'block'};
2731
max-height: 10vh;
@@ -173,10 +177,16 @@ const InputArea = memo(function InputArea({onSendMessage}: InputAreaProps) {
173177

174178

175179
return (
176-
<InputContainer $hide={shouldHideInput}>
180+
<InputContainer
181+
$hide={shouldHideInput}
182+
data-testid="input-container"
183+
id="chat-input-container"
184+
>
177185
<StyledForm onSubmit={handleSubmit}>
178186
<TextArea
179187
ref={textAreaRef}
188+
data-testid="message-input"
189+
id="message-input"
180190
value={message}
181191
onChange={handleMessageChange}
182192
onKeyPress={handleKeyPress}
@@ -187,6 +197,8 @@ const InputArea = memo(function InputArea({onSendMessage}: InputAreaProps) {
187197
/>
188198
<SendButton
189199
type="submit"
200+
data-testid="send-button"
201+
id="send-message-button"
190202
disabled={isSubmitting || !message.trim()}
191203
aria-label="Send message"
192204
>

‎webapp/src/components/Menu/Menu.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ function newGlobalID(): string {
4545
const MenuContainer = styled.div<MenuContainerProps>`
4646
display: flex;
4747
justify-content: space-between;
48+
/* Add test id */
49+
50+
&[data-testid] {
51+
outline: none;
52+
}
53+
4854
border-bottom: 1px solid ${({theme}) => theme.colors.border};
4955
max-height: 5vh;
5056
display: ${({$hidden}) => $hidden ? 'none' : 'flex'};
@@ -325,14 +331,24 @@ export const Menu: React.FC = () => {
325331

326332

327333
return (
328-
<MenuContainer $hidden={!showMenubar}>
334+
<MenuContainer $hidden={!showMenubar}
335+
data-testid="main-menu"
336+
id="main-menu"
337+
>
329338
<ToolbarLeft>
330-
<DropButton as="a" href="/" onClick={() => console.log('[Menu] Navigating to home')}>
339+
<DropButton as="a" href="/" onClick={() => console.log('[Menu] Navigating to home')}
340+
data-testid="home-button"
341+
id="home-button"
342+
>
331343
<FontAwesomeIcon icon={faHome}/> Home
332344
</DropButton>
333345

334-
<Dropdown>
335-
<DropButton>App</DropButton>
346+
<Dropdown
347+
data-testid="app-menu-button"
348+
id="app-menu-button">
349+
<DropButton
350+
data-testid="sessions-button"
351+
id="sessions-button">App</DropButton>
336352
<DropdownContent>
337353
<DropdownItem onClick={() => openModal('sessions')}>Session List</DropdownItem>
338354
<DropdownItem as="a" href={"./#" + newGlobalID()}>New</DropdownItem>

‎webapp/src/components/MessageList.tsx‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ const MessageListContainer = styled.div`
1717
flex: 1;
1818
overflow-y: auto;
1919
padding: 1rem;
20+
/* Add test id */
21+
22+
&[data-testid] {
23+
outline: none;
24+
}
25+
2026
display: flex;
2127
flex-direction: column;
2228
gap: 1rem;
@@ -152,27 +158,27 @@ const MessageItem = styled.div<{ type: MessageType }>`
152158
perspective: inherit;
153159
154160
background-color: ${({type}) => {
155-
switch (type) {
156-
case 'user':
157-
return ({theme}) => theme.colors.primary;
158-
case 'system':
159-
return ({theme}) => theme.colors.secondary;
160-
case 'error':
161-
return ({theme}) => `linear-gradient(135deg, ${theme.colors.error}, ${theme.colors.warning})`;
162-
case 'loading':
163-
return ({theme}) => theme.colors.surface;
164-
case 'assistant':
165-
return ({theme}) => theme.colors.surface;
166-
case 'reference':
167-
return ({theme}) => theme.colors.surface;
168-
default:
169-
return ({theme}) => theme.colors.surface;
170-
}
171-
}};
161+
switch (type) {
162+
case 'user':
163+
return ({theme}) => theme.colors.primary;
164+
case 'system':
165+
return ({theme}) => theme.colors.secondary;
166+
case 'error':
167+
return ({theme}) => `linear-gradient(135deg, ${theme.colors.error}, ${theme.colors.warning})`;
168+
case 'loading':
169+
return ({theme}) => theme.colors.surface;
170+
case 'assistant':
171+
return ({theme}) => theme.colors.surface;
172+
case 'reference':
173+
return ({theme}) => theme.colors.surface;
174+
default:
175+
return ({theme}) => theme.colors.surface;
176+
}
177+
}};
172178
color: ${({type, theme}) =>
173-
type === 'user' || type === 'system' || type === 'error'
174-
? '#fff'
175-
: theme.colors.text.primary};
179+
type === 'user' || type === 'system' || type === 'error'
180+
? '#fff'
181+
: theme.colors.text.primary};
176182
177183
&:hover {
178184
transform: translate3d(0, -3px, 0);
@@ -376,7 +382,11 @@ const MessageList: React.FC<MessageListProps> = ({messages: propMessages}) => {
376382
}, [finalMessages]);
377383

378384
return (
379-
<MessageListContainer ref={messageListRef} className={containerClassName}>
385+
<MessageListContainer
386+
data-testid="message-list"
387+
id="message-list-container"
388+
ref={messageListRef} className={containerClassName}
389+
>
380390
{finalMessages.map((message) => {
381391
console.debug('MessageList - Rendering message', {
382392
id: message.id,
@@ -387,10 +397,13 @@ const MessageList: React.FC<MessageListProps> = ({messages: propMessages}) => {
387397
return <MessageItem
388398
key={message.id}
389399
type={message.type}
400+
data-testid={`message-${message.id}`}
401+
id={`message-${message.id}`}
390402
>
391403
{<MessageContent
392404
className="message-body"
393405
onClick={!isArchive ? handleClick : undefined}
406+
data-testid={`message-content-${message.id}`}
394407
dangerouslySetInnerHTML={{
395408
__html: message.content
396409
}}

‎webapp/src/components/Modal/Modal.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,31 @@ const ModalOverlay = styled.div`
2020
const ModalContent = styled.div`
2121
background-color: ${({theme}) => theme.colors.surface};
2222
padding: ${({theme}) => theme.sizing.spacing.lg};
23+
/* Add test id */
24+
25+
&[data-testid] {
26+
outline: none;
27+
}
28+
2329
border-radius: ${({theme}) => theme.sizing.borderRadius.md};
2430
min-width: 300px;
2531
max-width: 80vw;
2632
max-height: 80vh;
2733
min-height: 200px;
2834
overflow: auto;
2935
box-shadow: 0 4px 16px ${({theme}) => `${theme.colors.primary}20`};
36+
3037
h2 {
3138
margin-bottom: ${({theme}) => theme.sizing.spacing.md};
3239
color: ${({theme}) => theme.colors.text.primary};
3340
font-weight: ${({theme}) => theme.typography.fontWeight.bold};
3441
}
42+
3543
button {
3644
border: 1px solid ${({theme}) => theme.colors.border};
3745
border-radius: ${({theme}) => theme.sizing.borderRadius.sm};
3846
cursor: pointer;
47+
3948
&:hover {
4049
background: ${({theme}) => theme.colors.primary};
4150
color: ${({theme}) => theme.colors.background};
@@ -64,8 +73,16 @@ export const Modal: React.FC = () => {
6473
}
6574

6675
return (
67-
<ModalOverlay onClick={() => dispatch(hideModal())}>
68-
<ModalContent className="modal-content" onClick={e => e.stopPropagation()}>
76+
<ModalOverlay
77+
onClick={() => dispatch(hideModal())}
78+
data-testid="modal-overlay"
79+
id="modal-overlay"
80+
>
81+
<ModalContent className="modal-content"
82+
onClick={e => e.stopPropagation()}
83+
data-testid="modal-content"
84+
id="modal-content"
85+
>
6986
<h2>{modalType}</h2>
7087
<div dangerouslySetInnerHTML={{__html: modalContent || ''}}/>
7188
</ModalContent>

0 commit comments

Comments
 (0)