-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
test: stories for supplementary chat messages #401
Conversation
codeincontext
commented
Nov 27, 2024
- Extract demo limit message from chat list file, and add a story
- Extract download buttons from chat list, and add a story
- Change the paths of some other stories to fit in
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Playwright test resultsDetails Open report ↗︎ Flaky testsNo persona › tests/modifiy-lesson.test.ts › Modify a lesson plan › Modify a lesson resource Skipped testsNo persona › tests/auth.test.ts › authenticate through Clerk UI |
@@ -45,7 +45,6 @@ export const decorators: Decorator[] = [ | |||
ClerkDecorator, | |||
(Story) => ( | |||
<> | |||
{/* TODO: Mock tRPC calls with MSW */} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are doing this now
function DemoLimitMessage({ id }: Readonly<{ id: string }>) { | ||
return ( | ||
<div className="w-full flex-col gap-11"> | ||
<ChatMessage | ||
chatId={id} | ||
ailaStreamingStatus="Idle" | ||
message={{ | ||
id: "demo-limit", | ||
role: "assistant", | ||
content: | ||
'{"type": "error", "message": "**Your lesson is complete**\\nYou can no longer edit this lesson. [Create new lesson.](/aila)"}', | ||
}} | ||
persistedModerations={[]} | ||
separator={<span className="my-10 flex" />} | ||
/> | ||
</div> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Extracted to a new file and story
const InChatDownloadButtons = ({ | ||
demo, | ||
id, | ||
setDialogWindow, | ||
}: { | ||
readonly demo: DemoContextProps; | ||
readonly id: string; | ||
readonly setDialogWindow: Dispatch<SetStateAction<DialogTypes>>; | ||
}) => { | ||
return ( | ||
<OakFlex $flexDirection="column" $gap="all-spacing-7" $mv="space-between-l"> | ||
{demo.isSharingEnabled && ( | ||
<Link | ||
href={demo.isSharingEnabled ? `/aila/download/${id}` : "#"} | ||
onClick={() => { | ||
if (!demo.isSharingEnabled) { | ||
setDialogWindow("demo-share-locked"); | ||
} | ||
}} | ||
> | ||
<InnerInChatButton iconName="download">Download</InnerInChatButton> | ||
</Link> | ||
)} | ||
<button | ||
onClick={() => { | ||
if (demo.isSharingEnabled) { | ||
setDialogWindow("share-chat"); | ||
} else { | ||
setDialogWindow("demo-share-locked"); | ||
} | ||
}} | ||
> | ||
<InnerInChatButton iconName="share">Share</InnerInChatButton> | ||
</button> | ||
</OakFlex> | ||
); | ||
}; | ||
|
||
const InnerInChatButton = ({ | ||
iconName, | ||
|
||
children, | ||
}: { | ||
readonly iconName: "download" | "share"; | ||
|
||
readonly children: string; | ||
}) => { | ||
return ( | ||
<OakFlex | ||
$pa="inner-padding-m" | ||
$gap="all-spacing-3" | ||
$background="white" | ||
$borderRadius="border-radius-m" | ||
$alignItems="center" | ||
$dropShadow="drop-shadow-standard" | ||
> | ||
<OakBox $transform="scale"> | ||
<OakIcon iconName={iconName} $width="all-spacing-7" /> | ||
</OakBox> | ||
<OakSpan $font="body-2">{children}</OakSpan> | ||
</OakFlex> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Extracted to a new file and story
Quality Gate passedIssues Measures |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Chromatic looks good. 👍
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"; | |||
import { ChatStartForm } from "./chat-start-form"; | |||
|
|||
const meta: Meta<typeof ChatStartForm> = { | |||
title: "Components/Chat/ChatStartForm", | |||
title: "Components/Chat Start/ChatStartForm", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is that path meant to have a gap? Chat Start
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for checking. This is only used in the storybook UI so it does look right there
🎉 This PR is included in version 1.17.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |