forked from microsoft/semantic-kernel
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show document upload card in regular message format (microsoft#1566)
### Motivation and Context <!-- Thank you for your contribution to the semantic-kernel repo! Please help reviewers and future users, providing the following information: 1. Why is this change required? 2. What problem does it solve? 3. What scenario does it contribute to? 4. If it fixes an open issue, please link to the issue here. --> messages indicating a successful document upload should be shown in the typical message format. ### Description <!-- Describe your changes, the overall approach, the underlying design. These notes will help understanding how your code works. Thanks! --> - moves code from `ChatHistory` used to render regular messages into `ChatHistoryTextContent` - changes `ChatHistoryFileItem` to `ChatHistoryDocumentContent` and removes the JSX used for rendering the header ### Preview   ### Contribution Checklist <!-- Before submitting this PR, please make sure: --> - [X] The code builds clean without any errors or warnings - [X] The PR follows SK Contribution Guidelines (https://github.com/microsoft/semantic-kernel/blob/main/CONTRIBUTING.md) - [X] The code follows the .NET coding conventions (https://learn.microsoft.com/dotnet/csharp/fundamentals/coding-style/coding-conventions) verified with `dotnet format` - [X] All unit tests pass, and I have added new tests where possible - [X] I didn't break anyone 😄 --------- Co-authored-by: Teresa Hoang <125500434+teresaqhoang@users.noreply.github.com>
- Loading branch information
1 parent
28181d7
commit 7ab8a05
Showing
8 changed files
with
171 additions
and
202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 0 additions & 135 deletions
135
samples/apps/copilot-chat-app/webapp/src/components/chat/ChatHistoryFileItem.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
...s/copilot-chat-app/webapp/src/components/chat/chat-history/ChatHistoryDocumentContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| // Copyright (c) Microsoft. All rights reserved. | ||
|
|
||
| import { | ||
| Caption1, | ||
| Card, | ||
| CardHeader, | ||
| ProgressBar, | ||
| Text, | ||
| makeStyles, | ||
| mergeClasses, | ||
| shorthands, | ||
| tokens, | ||
| } from '@fluentui/react-components'; | ||
| import React from 'react'; | ||
| import { IChatMessage } from '../../../libs/models/ChatMessage'; | ||
| import { getFileIconByFileExtension } from '../ChatResourceList'; | ||
|
|
||
| const useClasses = makeStyles({ | ||
| card: { | ||
| height: 'fit-content', | ||
| width: '275px', | ||
| backgroundColor: tokens.colorNeutralBackground3, | ||
| ...shorthands.gap(0), | ||
| ...shorthands.margin(tokens.spacingVerticalS, 0), | ||
| ...shorthands.padding(tokens.spacingVerticalXS, 0), | ||
| }, | ||
| cardCaption: { | ||
| color: tokens.colorNeutralForeground2, | ||
| }, | ||
| cardHeader: { | ||
| ...shorthands.margin(0, tokens.spacingHorizontalS), | ||
| }, | ||
| cardHeaderText: { | ||
| fontSize: 'small', | ||
| fontWeight: '500', | ||
| }, | ||
| footer: { | ||
| float: 'right', | ||
| fontSize: 'small', | ||
| fontWeight: '500', | ||
| color: tokens.colorNeutralForegroundDisabled, | ||
| }, | ||
| icon: { | ||
| height: '32px', | ||
| width: '32px', | ||
| }, | ||
| floatLeft: { | ||
| float: 'left', | ||
| }, | ||
| }); | ||
|
|
||
| interface ChatHistoryDocumentContentProps { | ||
| isMe: boolean; | ||
| message: IChatMessage; | ||
| } | ||
|
|
||
| interface DocumentMessageContent { | ||
| name: string; | ||
| size: string; | ||
| } | ||
|
|
||
| export const ChatHistoryDocumentContent: React.FC<ChatHistoryDocumentContentProps> = ({ isMe, message }) => { | ||
| const classes = useClasses(); | ||
|
|
||
| let name = '', | ||
| size = ''; | ||
| try { | ||
| ({ name, size } = JSON.parse(message.content) as DocumentMessageContent); | ||
| } catch (e) { | ||
| console.error('Error parsing chat history file item: ' + message.content); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Card appearance="filled-alternative" className={classes.card}> | ||
| <CardHeader | ||
| className={classes.cardHeader} | ||
| image={getFileIconByFileExtension(name, { className: classes.icon })} | ||
| header={<Text className={classes.cardHeaderText}>{name}</Text>} | ||
| description={ | ||
| <Caption1 block className={classes.cardCaption}> | ||
| {size} | ||
| </Caption1> | ||
| } | ||
| /> | ||
| <ProgressBar thickness="large" color="success" value={1} /> | ||
| </Card> | ||
| <span className={isMe ? classes.footer : mergeClasses(classes.footer, classes.floatLeft)}> | ||
| Success: memory established | ||
| </span> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.