12 |
}
16 | onClick={() => setIsOpen(!isOpen)}
17 | style={{
18 | borderRadius: '8px',
19 | padding: '0.5rem 1rem',
20 | fontWeight: 'bold',
21 | }}
22 | >
23 | {isOpen ? 'Collapse' : 'Expand'} Reasoning
24 |
25 | {isOpen && (
26 |
27 | {content}
28 |
29 | )}
30 |
31 | )
32 | }
33 |
34 | export default ThinkSection
35 |
--------------------------------------------------------------------------------
/webview/message/src/components/MessageItem/components/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as CodeBlockMatched } from './CodeBlockMatched'
2 | export { default as CodeBlockUnmatched } from './CodeBlockUnmatched'
3 | export { default as MessageItemTokenInfo } from './MessageItemTokenInfo'
4 | export { default as MessageItemToolbar } from './MessageItemToolbar'
5 | export { default as ThinkSection } from './ThinkSection'
6 |
--------------------------------------------------------------------------------
/webview/message/src/components/MessageItem/styles/useMessageItemStyles.tsx:
--------------------------------------------------------------------------------
1 | import { makeStyles } from '@fluentui/react-components';
2 |
3 | export const useMessageItemStyles = makeStyles({
4 | messageItem: {
5 | borderRadius: '12px',
6 | margin: '1rem 0', // Add vertical spacing between messages
7 | padding: '1.5rem', // Increase padding for better readability
8 | maxWidth: '80%',
9 | boxShadow: '0 4px 6px var(--shadowColor)', // Subtle shadow
10 | border: '1px solid var(--borderColor)', // Add a light border
11 | backgroundColor: 'var(--assistantBackground)', // Use consistent background
12 | },
13 | messageWrapper: {
14 | display: 'flex',
15 | flexDirection: 'column',
16 | gap: '1rem', // Add spacing between elements
17 | },
18 | messageHeader: {
19 | paddingBottom: '0.5rem',
20 | borderBottom: '1px solid var(--borderColor)', // Add a separator
21 | },
22 | author: {
23 | paddingRight: '1rem',
24 | fontWeight: 'bold',
25 | color: 'var(--userColor)',
26 | },
27 | timestamp: {
28 | fontSize: '0.875rem',
29 | color: 'var(--userColor)',
30 | },
31 | })
32 |
--------------------------------------------------------------------------------
/webview/message/src/components/MessageList/components/WelcomeMessageBar.tsx:
--------------------------------------------------------------------------------
1 | import { IChatCompletionListProps } from '@app/interfaces';
2 | import {
3 | Link,
4 | makeStyles,
5 | MessageBar,
6 | MessageBarBody,
7 | MessageBarGroup,
8 | MessageBarTitle,
9 | tokens,
10 | } from '@fluentui/react-components';
11 | import * as React from 'react';
12 |
13 | const useStyles = makeStyles({
14 | messageBarGroup: {
15 | padding: tokens.spacingHorizontalMNudge,
16 | display: 'flex',
17 | flexDirection: 'column',
18 | marginTop: '10px',
19 | gap: '10px',
20 | flex: 1,
21 | overflow: 'auto',
22 | },
23 | buttonGroup: {
24 | display: 'flex',
25 | justifyContent: 'end',
26 | gap: '5px',
27 | },
28 | })
29 |
30 | export const WelcomeMessageBar: React.FC