Skip to content

Commit c0252d9

Browse files
PixeledCodePixeledCode
committed
feat(ai-chat-log): add full screen example
1 parent ed9e2b3 commit c0252d9

File tree

3 files changed

+184
-5
lines changed

3 files changed

+184
-5
lines changed

‎packages/paste-codemods/tools/.cache/mappings.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"AIChatMessageAuthor": "@twilio-paste/core/ai-chat-log",
1616
"AIChatMessageBody": "@twilio-paste/core/ai-chat-log",
1717
"AIChatMessageLoading": "@twilio-paste/core/ai-chat-log",
18+
"AIChatMessageSource": "@twilio-paste/core/ai-chat-log",
19+
"AIChatMessageSourceLink": "@twilio-paste/core/ai-chat-log",
1820
"useAIChatLogger": "@twilio-paste/core/ai-chat-log",
1921
"Alert": "@twilio-paste/core/alert",
2022
"AlertDialog": "@twilio-paste/core/alert-dialog",

‎packages/paste-core/components/ai-chat-log/stories/aiChatLog.stories.tsx

Lines changed: 181 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import { Box } from "@twilio-paste/box";
55
import { Breadcrumb, BreadcrumbItem } from "@twilio-paste/breadcrumb";
66
import { Button } from "@twilio-paste/button";
77
import { ButtonGroup } from "@twilio-paste/button-group";
8-
import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer";
8+
import {
9+
ChatComposer,
10+
ChatComposerActionGroup,
11+
ChatComposerActionRow,
12+
ChatComposerContainer,
13+
} from "@twilio-paste/chat-composer";
914
import { Checkbox } from "@twilio-paste/checkbox";
1015
import { CustomizationProvider } from "@twilio-paste/customization";
1116
import {
@@ -19,12 +24,16 @@ import {
1924
import { DetailText } from "@twilio-paste/detail-text";
2025
import { FormPill, FormPillGroup, useFormPillState } from "@twilio-paste/form-pill-group";
2126
import { Heading } from "@twilio-paste/heading";
27+
import { AgentIcon } from "@twilio-paste/icons/esm/AgentIcon";
2228
import { ArrowBackIcon } from "@twilio-paste/icons/esm/ArrowBackIcon";
2329
import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon";
2430
import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
2531
import { CommunityIcon } from "@twilio-paste/icons/esm/CommunityIcon";
2632
import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon";
33+
import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
34+
import { EmojiIcon } from "@twilio-paste/icons/esm/EmojiIcon";
2735
import { ExportIcon } from "@twilio-paste/icons/esm/ExportIcon";
36+
import { HistoryIcon } from "@twilio-paste/icons/esm/HistoryIcon";
2837
import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
2938
import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon";
3039
import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon";
@@ -35,6 +44,7 @@ import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon";
3544
import { UnsortedIcon } from "@twilio-paste/icons/esm/UnsortedIcon";
3645
import { Input } from "@twilio-paste/input";
3746
import { Label } from "@twilio-paste/label";
47+
import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu";
3848
import {
3949
PageHeader,
4050
PageHeaderActions,
@@ -61,6 +71,7 @@ import {
6171
} from "@twilio-paste/summary-detail";
6272
import { Text } from "@twilio-paste/text";
6373
import { useTheme } from "@twilio-paste/theme";
74+
import { Tooltip, useTooltipState } from "@twilio-paste/tooltip";
6475
import { useUID } from "@twilio-paste/uid-library";
6576
import * as React from "react";
6677

@@ -380,6 +391,53 @@ export const ExampleAIChatLogSources = (): React.ReactNode => {
380391
);
381392
};
382393

394+
const ChatComposerRow = (): React.ReactNode => {
395+
const tooltip1 = useTooltipState();
396+
const tooltip2 = useTooltipState();
397+
const menu = useMenuState();
398+
399+
return (
400+
<ChatComposerActionRow>
401+
<Tooltip state={tooltip1} text="Attach">
402+
<Button variant="secondary" size="circle_small">
403+
<AttachIcon decorative={false} title="attach a file to your message" />
404+
</Button>
405+
</Tooltip>
406+
<Tooltip state={tooltip2} text="Emoji">
407+
<Button variant="secondary" size="circle_small">
408+
<EmojiIcon decorative={false} title="Chat history" />
409+
</Button>
410+
</Tooltip>
411+
412+
<>
413+
<MenuButton {...menu} variant="secondary" size="circle_small">
414+
<MoreIcon decorative={false} title="More actions" />
415+
</MenuButton>
416+
<Menu {...menu} aria-label="Preferences">
417+
<MenuItem {...menu}>
418+
<Box display="flex" alignItems="center" columnGap="space20">
419+
<HistoryIcon decorative color="colorTextIcon" /> Chat history
420+
</Box>
421+
</MenuItem>
422+
<MenuItem {...menu}>
423+
<Box display="flex" alignItems="center" columnGap="space20">
424+
<AgentIcon decorative color="colorTextIcon" /> Contact an agent
425+
</Box>
426+
</MenuItem>
427+
<MenuItem {...menu}>
428+
<Box display="flex" alignItems="center" columnGap="space20">
429+
<DocumentationIcon decorative color="colorTextIcon" /> Quick Start Guide
430+
</Box>
431+
</MenuItem>
432+
<MenuSeparator {...menu} />
433+
<MenuItem {...menu}>Privacy Policy</MenuItem>
434+
<MenuItem {...menu}>Terms of Service</MenuItem>
435+
</Menu>
436+
</>
437+
</ChatComposerActionRow>
438+
);
439+
};
440+
383441
export const ExampleAIChatLogSidePanel = (): React.ReactNode => {
384442
const searchInput = useUID();
385443
const pillState = useFormPillState();
@@ -506,13 +564,11 @@ export const ExampleAIChatLogSidePanel = (): React.ReactNode => {
506564
ariaLabel="A basic chat composer"
507565
/>
508566
<ChatComposerActionGroup>
509-
<Button variant="secondary_icon" size="reset" onClick={() => setShowSource(true)}>
510-
<AttachIcon decorative={false} title="attach files to the message" />
511-
</Button>
512567
<Button variant="primary_icon" size="reset">
513568
<SendIcon decorative={false} title="Send" />
514569
</Button>
515570
</ChatComposerActionGroup>
571+
<ChatComposerRow />
516572
</ChatComposerContainer>
517573
</SidePanelFooter>
518574
)}
@@ -668,6 +724,127 @@ export const ExampleAIChatLogSidePanel = (): React.ReactNode => {
668724
);
669725
};
670726

727+
export const ExampleAIChatFullScreen = (): React.ReactNode => {
728+
const [isOpen, setIsOpen] = React.useState(false);
729+
730+
return (
731+
<SidePanelContainer isOpen={isOpen} setIsOpen={setIsOpen}>
732+
<SidePanel label="intelligent assistant ai bot side panel">
733+
<SidePanelHeader>
734+
<Box display="flex" alignItems="center" columnGap="space30">
735+
<Heading as="h3" variant="heading30" marginBottom="space0">
736+
Sources
737+
</Heading>
738+
</Box>
739+
</SidePanelHeader>
740+
<SidePanelBody>
741+
<Box width="100%">
742+
<Box display="flex" flexDirection="column" rowGap="space50">
743+
<AIChatMessageSourceLink number="1" url="#">
744+
Source title
745+
</AIChatMessageSourceLink>
746+
<AIChatMessageSourceLink number="2" url="#">
747+
Source title
748+
</AIChatMessageSourceLink>
749+
<AIChatMessageSourceLink number="3" url="#">
750+
Source title
751+
</AIChatMessageSourceLink>
752+
<AIChatMessageSourceLink number="4" url="#">
753+
Source title with a very long title that should wrap to the next line
754+
</AIChatMessageSourceLink>
755+
</Box>
756+
</Box>
757+
</SidePanelBody>
758+
</SidePanel>
759+
<SidePanelPushContentWrapper>
760+
<Box paddingX="space50" paddingTop="space130" paddingBottom="space160">
761+
<AIChatLog>
762+
<AIChatMessage variant="bot">
763+
<AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
764+
<AIChatMessageBody>Hello, what can I help you with?</AIChatMessageBody>
765+
</AIChatMessage>
766+
<AIChatMessage variant="user">
767+
<AIChatMessageBody>Hi! Can you help me with my user interface?</AIChatMessageBody>
768+
</AIChatMessage>
769+
<AIChatMessage variant="bot">
770+
<AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
771+
Of course! What do you need help with?
772+
</AIChatMessage>
773+
<AIChatMessage variant="bot">
774+
<AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
775+
<AIChatMessageBody>
776+
I&apos;m happy to help with any questions you have about user interfaces, accessibility, or the Twilio
777+
Paste design system. Just ask!
778+
</AIChatMessageBody>
779+
</AIChatMessage>
780+
<AIChatMessage variant="user">
781+
<AIChatMessageBody>My question is about the Switch component.</AIChatMessageBody>
782+
</AIChatMessage>
783+
<AIChatMessage variant="bot">
784+
<AIChatMessageAuthor aria-label="ai said">Good Bot</AIChatMessageAuthor>
785+
<AIChatMessageBody>
786+
A <Anchor href="https://paste.twilio.design/components/switch">Switch</Anchor> is an interactive binary
787+
control. What other information about the Paste Switch component can I help with?
788+
</AIChatMessageBody>
789+
<SummaryDetail>
790+
<SummaryDetailHeading>
791+
<SummaryDetailToggleButton aria-label="BOOP" />
792+
<SummaryDetailHeadingContent>
793+
<Text as="p" fontWeight="fontWeightSemibold">
794+
Sources
795+
</Text>
796+
</SummaryDetailHeadingContent>
797+
</SummaryDetailHeading>
798+
<SummaryDetailContent>
799+
<Box
800+
display="flex"
801+
flexDirection="column"
802+
rowGap="space20"
803+
marginBottom="space30"
804+
fontSize="fontSize20"
805+
>
806+
<AIChatMessageSourceLink number="1" url="#">
807+
Source title
808+
</AIChatMessageSourceLink>
809+
<AIChatMessageSourceLink number="2" url="#">
810+
Source title
811+
</AIChatMessageSourceLink>
812+
<AIChatMessageSourceLink number="3" url="#">
813+
Source title
814+
</AIChatMessageSourceLink>
815+
</Box>
816+
<Button variant="secondary" onClick={() => setIsOpen(true)}>
817+
View all sources
818+
</Button>
819+
</SummaryDetailContent>
820+
</SummaryDetail>
821+
</AIChatMessage>
822+
</AIChatLog>
823+
<ChatComposerContainer variant="contained">
824+
<ChatComposer
825+
maxHeight="size10"
826+
config={{
827+
namespace: "customer-chat",
828+
onError: (e) => {
829+
throw e;
830+
},
831+
}}
832+
placeholder="Chat text"
833+
ariaLabel="A basic chat composer"
834+
/>
835+
<ChatComposerActionGroup>
836+
<Button variant="primary_icon" size="reset">
837+
<SendIcon decorative={false} title="Send" />
838+
</Button>
839+
</ChatComposerActionGroup>
840+
<ChatComposerRow />
841+
</ChatComposerContainer>
842+
</Box>
843+
</SidePanelPushContentWrapper>
844+
</SidePanelContainer>
845+
);
846+
};
847+
671848
export const ExampleFullScreenAIChatLog = (): React.ReactNode => {
672849
return (
673850
<>

‎packages/paste-core/components/chart-provider/type-docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1575,7 +1575,7 @@
15751575
"externalProp": true
15761576
},
15771577
"options": {
1578-
"type": "any",
1578+
"type": "ChartTypeOptions",
15791579
"defaultValue": null,
15801580
"required": false,
15811581
"externalProp": false

0 commit comments

Comments
 (0)