@pega/cosmos-react-work 8.19.0 → 8.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Details/Details.styles.d.ts +1 -2
- package/lib/components/Details/Details.styles.d.ts.map +1 -1
- package/lib/components/Details/Details.styles.js +17 -14
- package/lib/components/Details/Details.styles.js.map +1 -1
- package/lib/components/Details/DetailsList.d.ts.map +1 -1
- package/lib/components/Details/DetailsList.js +1 -5
- package/lib/components/Details/DetailsList.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.d.ts +6 -0
- package/lib/components/GenAICoach/GenAIMessage.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.js +10 -2
- package/lib/components/GenAICoach/GenAIMessage.js.map +1 -1
- package/lib/components/GenAICoach/index.d.ts +1 -1
- package/lib/components/GenAICoach/index.d.ts.map +1 -1
- package/lib/components/GenAICoach/index.js +1 -1
- package/lib/components/GenAICoach/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -7,8 +7,7 @@ interface StyledDetailsListProps extends StyledFieldValueListProps {
|
|
|
7
7
|
/** The character length applied to all list labels */
|
|
8
8
|
labelLength?: number;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
* @default false
|
|
10
|
+
* @deprecated Ignored.
|
|
12
11
|
*/
|
|
13
12
|
narrow?: boolean;
|
|
14
13
|
theme: DefaultTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB
|
|
1
|
+
{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,YAAY,CAAC;CACrB;AAKD,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,2BAA2B,UAAU,CAAC;AACnD,eAAO,MAAM,6BAA6B,SAAS,CAAC;AAEpD,eAAO,MAAM,0BAA0B,6EAkCrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6EAW7B,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6EAItC,CAAC;AAEF,eAAO,MAAM,iBAAiB,gNAsI5B,CAAC;AAgBH,eAAO,MAAM,aAAa;cACd,YAAY,CAAC,SAAS,CAAC;kBACnB,MAAM;SAmEpB,CAAC;AAIH,eAAO,MAAM,mBAAmB,mGAgF/B,CAAC"}
|
|
@@ -80,8 +80,8 @@ export const StyledInlineFieldValueItem = styled.div `
|
|
|
80
80
|
min-width: 0;
|
|
81
81
|
}
|
|
82
82
|
`;
|
|
83
|
-
export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme
|
|
84
|
-
const { base: { spacing, palette }, components: { details: { 'field-label': fieldLabelPosition }, 'field-value-list': { inline: { detached } } } } = theme;
|
|
83
|
+
export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme }) => {
|
|
84
|
+
const { base: { spacing, palette, 'content-width': { md } }, components: { details: { 'field-label': fieldLabelPosition }, 'field-value-list': { inline: { detached } } } } = theme;
|
|
85
85
|
const { inFieldGroup } = useContext(DetailsContext);
|
|
86
86
|
const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';
|
|
87
87
|
const isValueComparison = variant === 'value-comparison';
|
|
@@ -94,6 +94,8 @@ export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelL
|
|
|
94
94
|
width: 100%;
|
|
95
95
|
max-width: ${oneColumnDetailsColumnWidth};
|
|
96
96
|
height: fit-content;
|
|
97
|
+
container-type: inline-size;
|
|
98
|
+
container-name: details-list;
|
|
97
99
|
|
|
98
100
|
${StyledFieldValue} {
|
|
99
101
|
word-break: break-word;
|
|
@@ -172,23 +174,24 @@ export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelL
|
|
|
172
174
|
`}
|
|
173
175
|
|
|
174
176
|
/* Responsive behavior */
|
|
175
|
-
${
|
|
176
|
-
!labelTop &&
|
|
177
|
+
${!labelTop &&
|
|
177
178
|
!isValueComparison &&
|
|
178
179
|
css `
|
|
179
|
-
${
|
|
180
|
-
|
|
180
|
+
@container details-list (width < ${md}) {
|
|
181
|
+
${StyledInlineFieldValueItem} {
|
|
182
|
+
grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);
|
|
181
183
|
|
|
182
|
-
|
|
184
|
+
${inFieldGroup &&
|
|
183
185
|
css `
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
186
|
+
grid-template-columns:
|
|
187
|
+
minmax(0, calc(${labelLength}ch - ${spacing}))
|
|
188
|
+
minmax(calc(50% + 0.5 * ${spacing}), 1fr);
|
|
189
|
+
`}
|
|
190
|
+
}
|
|
189
191
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
+
dd {
|
|
193
|
+
min-width: 50%;
|
|
194
|
+
}
|
|
192
195
|
}
|
|
193
196
|
`}
|
|
194
197
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledIcon,\n useDirection,\n StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top */\n stacked?: boolean;\n /** The character length applied to all list labels */\n labelLength?: number;\n /**\n * Whether to apply narrow list styles\n * @default false\n */\n narrow?: boolean;\n theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n /**\n * Number of columns in the list\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /**\n * Arrangement of columns\n */\n arrangement?: DetailsProps['arrangement'];\n /**\n * Style variations\n */\n variant?: DetailsProps['variant'];\n theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation, palette }\n } = theme;\n const { rtl } = useDirection();\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n grid-column: 1 / -1;\n margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n ${detached &&\n css`\n border-bottom: 0.0625rem solid ${palette['border-line']};\n padding-bottom: calc(0.5 * ${spacing});\n `}\n\n ${StyledButtonLink} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n 'content-width': { xl }\n }\n } = theme;\n\n return css`\n max-width: ${xl};\n margin-block-end: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n display: flex;\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n width: 100%;\n `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n > * {\n min-width: 0;\n }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n stacked,\n labelLength,\n variant,\n theme,\n narrow = false\n}) => {\n const {\n base: { spacing, palette },\n components: {\n details: { 'field-label': fieldLabelPosition },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n const { inFieldGroup } = useContext(DetailsContext);\n const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n const isValueComparison = variant === 'value-comparison';\n const fieldValueGapMultiplier = 2;\n\n return css`\n /* Field Grid Styles */\n display: flex;\n flex-direction: column;\n row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n width: 100%;\n max-width: ${oneColumnDetailsColumnWidth};\n height: fit-content;\n\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n\n /* Negative margin to account for overflow clipping of focus indicator */\n padding: 0.3rem;\n margin: -0.3rem;\n }\n\n ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n width: 100%;\n }\n\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n grid-template-rows: max-content;\n column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n minmax(14ch, 1fr);\n `};\n }\n\n ${StyledStackedFieldValue} {\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n }\n\n /* Stacked Label Styles */\n ${labelTop &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n\n dt {\n max-width: 100%;\n }\n\n ${!isValueComparison &&\n css`\n ${StyledStackedFieldValue}:not(:first-child) {\n margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n }\n `}\n `}\n\n /* Value Comparison Styles */\n ${isValueComparison &&\n css`\n display: grid;\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n /* Responsive behavior */\n ${narrow &&\n !labelTop &&\n !isValueComparison &&\n css`\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(0, calc(${labelLength}ch - ${spacing}))\n minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n `}\n }\n\n dd {\n min-width: 50%;\n }\n `}\n `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n return css`\n > ${StyledFieldValueGroupLabel} {\n margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n }\n\n > ${StyledDetailDescription}:first-child {\n margin-block-start: calc(1.5 * ${spacing});\n }\n `;\n};\n\nexport const StyledDetails = styled.div<{\n variant?: DetailsProps['variant'];\n columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'border-line': borderColor }\n },\n components: {\n 'form-control': { 'border-width': borderWidth },\n button: { 'border-radius': buttonBorderRadius },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n return css`\n &:not(:first-child) {\n ${spacingTop(spacing)}\n }\n\n ${variant === 'field-group' &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${columnCount === 1 &&\n css`\n position: relative;\n padding-inline-start: ${spacing};\n\n ${detached &&\n css`\n padding-inline-start: calc(1.25 * ${spacing});\n `}\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: calc(-1 * ${spacing});\n inset-block-end: 0;\n inset-inline-start: 0;\n width: ${borderWidth};\n background: ${borderColor};\n\n ${detached &&\n css`\n inset-block-start: 0;\n width: 0.25rem;\n background: ${transparentize(0.67, borderColor)};\n border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n `}\n }\n `}\n `}\n\n ${!variant &&\n detached &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: 0;\n border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `};\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n ({ theme, arrangement, columnCount = 1 }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n width: 100%;\n\n ${columnCount === 2 &&\n !arrangement &&\n css`\n flex-wrap: wrap;\n `}\n\n ${columnCount === 1 &&\n css`\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n `};\n\n /* Column Widths */\n > ${StyledDetailColumn} {\n overflow: hidden;\n\n /* Negative margin to account for overflow clipping of focus indicator */\n padding: 0.3rem;\n margin: -0.3rem;\n\n ${columnCount === 3 &&\n css`\n width: ${multiColumnDetailsColumnWidth};\n max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n `}\n\n ${columnCount === 2 &&\n css`\n width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n max-width: unset;\n\n &:nth-child(3) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n\n ${columnCount !== 1 &&\n css`\n ${arrangement === 'narrowWide' &&\n css`\n &:nth-child(2) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n\n ${arrangement === 'wideNarrow' &&\n css`\n &:nth-child(1) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n `}\n\n ${columnCount === 1 &&\n css`\n width: 100%;\n max-width: 100%;\n\n &:not(:first-child) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n }\n `;\n }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledIcon,\n useDirection,\n StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top */\n stacked?: boolean;\n /** The character length applied to all list labels */\n labelLength?: number;\n /**\n * @deprecated Ignored.\n */\n narrow?: boolean;\n theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n /**\n * Number of columns in the list\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /**\n * Arrangement of columns\n */\n arrangement?: DetailsProps['arrangement'];\n /**\n * Style variations\n */\n variant?: DetailsProps['variant'];\n theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation, palette }\n } = theme;\n const { rtl } = useDirection();\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n grid-column: 1 / -1;\n margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n ${detached &&\n css`\n border-bottom: 0.0625rem solid ${palette['border-line']};\n padding-bottom: calc(0.5 * ${spacing});\n `}\n\n ${StyledButtonLink} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n const {\n base: {\n spacing,\n 'content-width': { xl }\n }\n } = theme;\n\n return css`\n max-width: ${xl};\n margin-block-end: calc(1.5 * ${spacing});\n `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n display: flex;\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n width: 100%;\n `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n > * {\n min-width: 0;\n }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n stacked,\n labelLength,\n variant,\n theme\n}) => {\n const {\n base: {\n spacing,\n palette,\n 'content-width': { md }\n },\n components: {\n details: { 'field-label': fieldLabelPosition },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n const { inFieldGroup } = useContext(DetailsContext);\n const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n const isValueComparison = variant === 'value-comparison';\n const fieldValueGapMultiplier = 2;\n\n return css`\n /* Field Grid Styles */\n display: flex;\n flex-direction: column;\n row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n width: 100%;\n max-width: ${oneColumnDetailsColumnWidth};\n height: fit-content;\n container-type: inline-size;\n container-name: details-list;\n\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n\n /* Negative margin to account for overflow clipping of focus indicator */\n padding: 0.3rem;\n margin: -0.3rem;\n }\n\n ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n width: 100%;\n }\n\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n grid-template-rows: max-content;\n column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n minmax(14ch, 1fr);\n `};\n }\n\n ${StyledStackedFieldValue} {\n ${detached &&\n css`\n padding-block: calc(0.5 * ${spacing});\n &:not(:last-child) {\n border-bottom: 0.0625rem dashed ${palette['border-line']};\n }\n `}\n }\n\n /* Stacked Label Styles */\n ${labelTop &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n\n dt {\n max-width: 100%;\n }\n\n ${!isValueComparison &&\n css`\n ${StyledStackedFieldValue}:not(:first-child) {\n margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n }\n `}\n `}\n\n /* Value Comparison Styles */\n ${isValueComparison &&\n css`\n display: grid;\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n /* Responsive behavior */\n ${!labelTop &&\n !isValueComparison &&\n css`\n @container details-list (width < ${md}) {\n ${StyledInlineFieldValueItem} {\n grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n ${inFieldGroup &&\n css`\n grid-template-columns:\n minmax(0, calc(${labelLength}ch - ${spacing}))\n minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n `}\n }\n\n dd {\n min-width: 50%;\n }\n }\n `}\n `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n return css`\n > ${StyledFieldValueGroupLabel} {\n margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n }\n\n > ${StyledDetailDescription}:first-child {\n margin-block-start: calc(1.5 * ${spacing});\n }\n `;\n};\n\nexport const StyledDetails = styled.div<{\n variant?: DetailsProps['variant'];\n columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'border-line': borderColor }\n },\n components: {\n 'form-control': { 'border-width': borderWidth },\n button: { 'border-radius': buttonBorderRadius },\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n\n return css`\n &:not(:first-child) {\n ${spacingTop(spacing)}\n }\n\n ${variant === 'field-group' &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${columnCount === 1 &&\n css`\n position: relative;\n padding-inline-start: ${spacing};\n\n ${detached &&\n css`\n padding-inline-start: calc(1.25 * ${spacing});\n `}\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: calc(-1 * ${spacing});\n inset-block-end: 0;\n inset-inline-start: 0;\n width: ${borderWidth};\n background: ${borderColor};\n\n ${detached &&\n css`\n inset-block-start: 0;\n width: 0.25rem;\n background: ${transparentize(0.67, borderColor)};\n border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n `}\n }\n `}\n `}\n\n ${!variant &&\n detached &&\n css`\n & + ${StyledDetailsList} {\n margin-block-start: 0;\n border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `};\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n ({ theme, arrangement, columnCount = 1 }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n width: 100%;\n\n ${columnCount === 2 &&\n !arrangement &&\n css`\n flex-wrap: wrap;\n `}\n\n ${columnCount === 1 &&\n css`\n flex-direction: column;\n row-gap: calc(${rowGapMultiplier} * ${spacing});\n `};\n\n /* Column Widths */\n > ${StyledDetailColumn} {\n overflow: hidden;\n\n /* Negative margin to account for overflow clipping of focus indicator */\n padding: 0.3rem;\n margin: -0.3rem;\n\n ${columnCount === 3 &&\n css`\n width: ${multiColumnDetailsColumnWidth};\n max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n `}\n\n ${columnCount === 2 &&\n css`\n width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n max-width: unset;\n\n &:nth-child(3) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n\n ${columnCount !== 1 &&\n css`\n ${arrangement === 'narrowWide' &&\n css`\n &:nth-child(2) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n\n ${arrangement === 'wideNarrow' &&\n css`\n &:nth-child(1) {\n width: calc(\n ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n );\n max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n }\n `}\n `}\n\n ${columnCount === 1 &&\n css`\n width: 100%;\n max-width: 100%;\n\n &:not(:first-child) > ${StyledDetails}:first-child {\n ${spacingTop(spacing)}\n }\n `}\n }\n `;\n }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsList.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EACV,uBAAuB,EACvB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC3C,IAAI,EACJ,cAAc,GAAG;IACf,6BAA6B;IAC7B,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CACF,CAAC;AAEF,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"DetailsList.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EACV,uBAAuB,EACvB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC3C,IAAI,EACJ,cAAc,GAAG;IACf,6BAA6B;IAC7B,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CACF,CAAC;AAEF,QAAA,MAAM,WAAW,4HAqDhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -12,13 +12,9 @@ const DetailsList = forwardRef(function DetailsList({ items, valueComparison = f
|
|
|
12
12
|
breakpointRef: containerRef,
|
|
13
13
|
themeProp: 'content-width'
|
|
14
14
|
});
|
|
15
|
-
const isMdContentWidthOrAbove = useBreakpoint('md', {
|
|
16
|
-
breakpointRef: containerRef,
|
|
17
|
-
themeProp: 'content-width'
|
|
18
|
-
});
|
|
19
15
|
const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
|
|
20
16
|
const applyMobileView = inMobileView || !isSmallOrAbove || !isSmContentWidthOrAbove;
|
|
21
|
-
return items.length > 0 ? (_jsx(StyledDetailsList, { ref: containerRef, labelLength: labelLength, stacked: applyMobileView, variant: valueComparison && !applyMobileView ? 'value-comparison' : undefined,
|
|
17
|
+
return items.length > 0 ? (_jsx(StyledDetailsList, { ref: containerRef, labelLength: labelLength, stacked: applyMobileView, variant: valueComparison && !applyMobileView ? 'value-comparison' : undefined, role: 'none', children: items.map(({ id, name, value, variant: fieldVariant, testId }) => {
|
|
22
18
|
const isStacked = applyMobileView ||
|
|
23
19
|
fieldVariant === 'stacked' ||
|
|
24
20
|
(fieldLabelPosition === 'stacked' && !valueComparison);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsList.js","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAQjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAejF,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,EAAE,GAAG;IAC1D,MAAM,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC/C,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"DetailsList.js","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAQjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAejF,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,EAAE,GAAG;IAC1D,MAAM,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC/C,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,kBAAkB,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACzE,MAAM,eAAe,GAAG,YAAY,IAAI,CAAC,cAAc,IAAI,CAAC,uBAAuB,CAAC;IAEpF,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,iBAAiB,IAChB,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EAC7E,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE;YAChE,MAAM,SAAS,GACb,eAAe;gBACf,YAAY,KAAK,SAAS;gBAC1B,CAAC,kBAAkB,KAAK,SAAS,IAAI,CAAC,eAAe,CAAC,CAAC;YAEzD,MAAM,IAAI,GAAG,CACX,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,IACpC,EAAE,IAAI,IAAI,CACf,CACH,CAAC;YAEF,OAAO,SAAS,IAAI,eAAe,CAAC,CAAC,CAAC,CACpC,IAAI,CACL,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,0BAA0B,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,YAC7E,IAAI,GACA,CACR,CAAC;QACJ,CAAC,CAAC,GACgB,CACrB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithRef, Ref } from 'react';\n\nimport {\n FieldValueItem,\n Grid,\n useBreakpoint,\n useConsolidatedRef,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type {\n FieldValueListItemProps,\n NoChildrenProp,\n RefElement,\n WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport { StyledDetailsList, StyledInlineFieldValueItem } from './Details.styles';\n\nexport type DetailsListProps = WithAttributes<\n 'dl',\n NoChildrenProp & {\n /** Field value list items */\n items: FieldValueListItemProps[];\n /** Whether to apply `value-comparison` styles to list items\n * @default false\n */\n valueComparison?: boolean;\n ref?: Ref<HTMLDListElement>;\n }\n>;\n\nconst DetailsList = forwardRef<RefElement<DetailsListProps>, PropsWithRef<DetailsListProps>>(\n function DetailsList({ items, valueComparison = false }, ref) {\n const {\n components: {\n details: { 'field-label': fieldLabelPosition }\n }\n } = useTheme();\n const { longestLabelLength, mobileView: inMobileView } = useContext(DetailsContext);\n const containerRef = useConsolidatedRef(ref);\n const isSmallOrAbove = useBreakpoint('sm');\n const isSmContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const applyMobileView = inMobileView || !isSmallOrAbove || !isSmContentWidthOrAbove;\n\n return items.length > 0 ? (\n <StyledDetailsList\n ref={containerRef}\n labelLength={labelLength}\n stacked={applyMobileView}\n variant={valueComparison && !applyMobileView ? 'value-comparison' : undefined}\n role='none'\n >\n {items.map(({ id, name, value, variant: fieldVariant, testId }) => {\n const isStacked =\n applyMobileView ||\n fieldVariant === 'stacked' ||\n (fieldLabelPosition === 'stacked' && !valueComparison);\n\n const item = (\n <FieldValueItem\n testId={testId}\n name={name}\n value={value}\n variant={isStacked ? 'stacked' : 'inline'}\n key={id ?? name}\n />\n );\n\n return isStacked || valueComparison ? (\n item\n ) : (\n <Grid as={StyledInlineFieldValueItem} container={{ cols: '16ch minmax(0, 1fr)' }}>\n {item}\n </Grid>\n );\n })}\n </StyledDetailsList>\n ) : null;\n }\n);\n\nexport default DetailsList;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAICoach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.styles.ts"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,oBAAoB,wGAAc,CAAC;AAGhD,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,eAAO,MAAM,uBAAuB,yGAYnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;2BA5ByC,CAAC;uDA8B7E,CAAC;AAEF,eAAO,MAAM,yBAAyB;aAC3B,eAAe,CAAC,SAAS,CAAC;gBACvB,eAAe,CAAC,iBAAiB,CAAC;eACnC,OAAO;SAgGnB,CAAC;AAIF,eAAO,MAAM,sBAAsB;2BA7F3B,CAAL;uDAkHD,CAAC;AAIH,eAAO,MAAM,qBAAqB;2BAtH1B,CAAL;uDAkID,CAAC;AAIH,eAAO,MAAM,oBAAoB;gBAA8B,OAAO;SAgBpE,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAY7B,CAAC;AAIF,eAAO,MAAM,mBAAmB;yBAAqC,OAAO;SAa3E,CAAC;AAIF,eAAO,MAAM,6BAA6B,yGAOxC,CAAC;AAIH,eAAO,MAAM,oBAAoB,kNAe/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oNAe3B,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAUtC,CAAC;AAIF,eAAO,MAAM,eAAe,kNAK1B,CAAC;AAIH,eAAO,MAAM,aAAa,uGAQxB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAgC7B,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAoBjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGA4B9B,CAAC;AAIF,eAAO,MAAM,sBAAsB;gBAA8B,OAAO;SAcvE,CAAC;AAIF,eAAO,MAAM,UAAU,kNAMtB,CAAC;AAIF,eAAO,MAAM,4BAA4B;2BA5XnC,CAAC;uDAgZL,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAI/B,CAAC;AAIH,eAAO,MAAM,WAAW,2GAItB,CAAC;AAEH,eAAO,MAAM,qBAAqB,+QAIhC,CAAC;AAIH,eAAO,MAAM,uBAAuB;2BAvc5B,CAAL;uDA6cF,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAQlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,sBAAsB;cAAmC,OAAO;SAmB3E,CAAC;AAIH,eAAO,MAAM,mBAAmB;
|
|
1
|
+
{"version":3,"file":"GenAICoach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.styles.ts"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,oBAAoB,wGAAc,CAAC;AAGhD,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,eAAO,MAAM,uBAAuB,yGAYnC,CAAC;AAIF,eAAO,MAAM,uBAAuB;2BA5ByC,CAAC;uDA8B7E,CAAC;AAEF,eAAO,MAAM,yBAAyB;aAC3B,eAAe,CAAC,SAAS,CAAC;gBACvB,eAAe,CAAC,iBAAiB,CAAC;eACnC,OAAO;SAgGnB,CAAC;AAIF,eAAO,MAAM,sBAAsB;2BA7F3B,CAAL;uDAkHD,CAAC;AAIH,eAAO,MAAM,qBAAqB;2BAtH1B,CAAL;uDAkID,CAAC;AAIH,eAAO,MAAM,oBAAoB;gBAA8B,OAAO;SAgBpE,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAY7B,CAAC;AAIF,eAAO,MAAM,mBAAmB;yBAAqC,OAAO;SAa3E,CAAC;AAIF,eAAO,MAAM,6BAA6B,yGAOxC,CAAC;AAIH,eAAO,MAAM,oBAAoB,kNAe/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oNAe3B,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAUtC,CAAC;AAIF,eAAO,MAAM,eAAe,kNAK1B,CAAC;AAIH,eAAO,MAAM,aAAa,uGAQxB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAgC7B,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAoBjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGA4B9B,CAAC;AAIF,eAAO,MAAM,sBAAsB;gBAA8B,OAAO;SAcvE,CAAC;AAIF,eAAO,MAAM,UAAU,kNAMtB,CAAC;AAIF,eAAO,MAAM,4BAA4B;2BA5XnC,CAAC;uDAgZL,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAQ5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAI/B,CAAC;AAIH,eAAO,MAAM,WAAW,2GAItB,CAAC;AAEH,eAAO,MAAM,qBAAqB,+QAIhC,CAAC;AAIH,eAAO,MAAM,uBAAuB;2BAvc5B,CAAL;uDA6cF,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAQlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,sBAAsB;cAAmC,OAAO;SAmB3E,CAAC;AAIH,eAAO,MAAM,mBAAmB;2BAthBhC,CADA;uDAqiBE,CAAC;AAIH,eAAO,MAAM,gBAAgB,oNAgB3B,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAGpC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oNAiBrC,CAAC;AAIH,eAAO,MAAM,wBAAwB,0GAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB;2BA5iBY,CAAC;uDA0jBzC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,yGAG3B,CAAC"}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { type ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
|
|
2
2
|
import type { GenAIMessageProps } from './GenAICoach.types';
|
|
3
|
+
interface StreamingContextProps {
|
|
4
|
+
isStreamingMessage?: boolean;
|
|
5
|
+
isStreamingInProgress?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/** Metadata Context */
|
|
8
|
+
export declare const StreamingContext: import("react").Context<StreamingContextProps>;
|
|
3
9
|
declare const GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps>;
|
|
4
10
|
export default GenAIMessage;
|
|
5
11
|
//# sourceMappingURL=GenAIMessage.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAWL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAiB5D,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAWL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAiB5D,UAAU,qBAAqB;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,uBAAuB;AACvB,eAAO,MAAM,gBAAgB,gDAG3B,CAAC;AAEH,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA0MpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useEffect } from 'react';
|
|
2
|
+
import { createContext, forwardRef, useEffect, useMemo } from 'react';
|
|
3
3
|
import { Actions, Button, Flex, Progress, registerIcon, useI18n, useTheme, useTestIds, ErrorState, markdownToPlainText } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
|
|
5
5
|
import { RichTextViewer } from '@pega/cosmos-react-rte';
|
|
@@ -10,6 +10,11 @@ import { isCoachMessage, isUserMessage } from './GenAICoach.utils';
|
|
|
10
10
|
import GenAIMessageProgress from './GenAIMessageProgress';
|
|
11
11
|
import GenAIMessageFeedbackButtons from './GenAIMessageFeedback';
|
|
12
12
|
registerIcon(polarisSolidIcon);
|
|
13
|
+
/** Metadata Context */
|
|
14
|
+
export const StreamingContext = createContext({
|
|
15
|
+
isStreamingMessage: false,
|
|
16
|
+
isStreamingInProgress: false
|
|
17
|
+
});
|
|
13
18
|
const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
14
19
|
const testIds = useTestIds(props.testId, getGenAICoachTestIds);
|
|
15
20
|
const theme = useTheme();
|
|
@@ -40,6 +45,9 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
40
45
|
props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);
|
|
41
46
|
}
|
|
42
47
|
}, [enableStreaming, isStreamingDone, allChunksReceived]);
|
|
48
|
+
const streamingContext = useMemo(() => {
|
|
49
|
+
return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };
|
|
50
|
+
}, [isStreamingMessage, props]);
|
|
43
51
|
if (isCoachMessage(props)) {
|
|
44
52
|
const { id: messageId, coachName, suggestions, onSend, loading, error, feedback, messageActions, markdownMap, onMessageActionClick } = props;
|
|
45
53
|
const { reaction } = feedback ?? {};
|
|
@@ -58,7 +66,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
58
66
|
if (announceInteraction) {
|
|
59
67
|
ariaLabel = `${ariaLabel} ${t('interaction_message')}`;
|
|
60
68
|
}
|
|
61
|
-
const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(RichTextViewer, { content: isStreamingMessage ? streamingMessage : message, type: 'markdown', markdownMap: markdownMap }), loading && _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] })) : (loading && _jsx(GenAIMessageProgress, {})) }));
|
|
69
|
+
const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(StreamingContext.Provider, { value: streamingContext, children: _jsx(RichTextViewer, { content: isStreamingMessage ? streamingMessage : message, type: 'markdown', markdownMap: markdownMap, escapeHtmlInMarkdownText: true }) }), loading && _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] })) : (loading && _jsx(GenAIMessageProgress, {})) }));
|
|
62
70
|
return (_jsxs(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'row', pad: [1, 0], gap: 0.5 }, type: 'message', "aria-label": ariaLabel, ref: ref, children: [_jsx(StyledGenAIAvatar, { name: coachName, icon: 'polaris-solid', color: theme.base.palette.ai, shape: 'circle', size: 'm' }), _jsxs(StyledMessage, { children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && _jsx(GenAIMessageProgress, {}), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage && message && (_jsx(RichTextViewer, { content: message, type: 'markdown', markdownMap: markdownMap })), (feedback || messageActions) && (_jsxs(Flex, { container: { direction: 'row', gap: 1, pad: [1, undefined] }, as: StyledActionsContainer, onMouseDown: () => {
|
|
63
71
|
onMessageActionClick?.(messageId);
|
|
64
72
|
}, children: [feedback && (_jsx(GenAIMessageFeedbackButtons, { messageId: messageId, feedback: feedback })), messageActions && _jsx(Actions, { ...messageActions })] })), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Actions,\n Button,\n Flex,\n Progress,\n registerIcon,\n useI18n,\n useTheme,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledGenAIAvatar,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\n\nregisterIcon(polarisSolidIcon);\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const theme = useTheme();\n const t = useI18n();\n\n const { message, announceInteraction, ...restProps } = props;\n const plainTextMessage = markdownToPlainText(message ?? '');\n let ariaLabel = plainTextMessage;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const {\n text: streamingMessage,\n isAnimationDone: isStreamingDone,\n animatedTillCursor\n } = useAnimatedText({\n text: message ?? '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: enableStreaming,\n tokenizeMarkdown: true,\n cursorStartIndex:\n isCoachMessage(props) && props.animationInitialCursorPos\n ? props.animationInitialCursorPos\n : undefined\n });\n\n useEffect(() => {\n if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n props.onAnimationCursorUpdate(animatedTillCursor);\n }\n }, [animatedTillCursor]);\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n // Consider streaming is done when we have all the chunks and all of them are rendered\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n suggestions,\n onSend,\n loading,\n error,\n feedback,\n messageActions,\n markdownMap,\n onMessageActionClick\n } = props;\n\n const { reaction } = feedback ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (feedback && reaction) {\n selectedFeedbackResponse = t('selected_noun', [\n reaction === 'liked' ? t('good_response') : t('bad_response')\n ]);\n\n feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n }\n\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n : feedbackAriaLabel;\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n />\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n loading && <GenAIMessageProgress />\n )}\n </>\n );\n\n return (\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'row', pad: [1, 0], gap: 0.5 }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <StyledGenAIAvatar\n name={coachName}\n icon='polaris-solid'\n color={theme.base.palette.ai}\n shape='circle'\n size='m'\n />\n <StyledMessage>\n {/* Streaming loader and content */}\n {streamingContent}\n\n {loading || error ? (\n <>\n {loading && !isStreamingMessage && <GenAIMessageProgress />}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage && message && (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n )}\n\n {(feedback || messageActions) && (\n <Flex\n container={{ direction: 'row', gap: 1, pad: [1, undefined] }}\n as={StyledActionsContainer}\n onMouseDown={() => {\n onMessageActionClick?.(messageId);\n }}\n >\n {feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && (\n <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n {suggestions.map(({ id, message: prompt }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n return (\n <StyledUserMessage\n as={StyledUserMessage}\n data-testid={testIds.userMessage}\n {...restProps}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {message && <RichTextViewer content={message} type='markdown' />}\n </StyledUserMessage>\n );\n }\n\n return null;\n }\n);\n\nexport default GenAIMessage;\n"]}
|
|
1
|
+
{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Actions,\n Button,\n Flex,\n Progress,\n registerIcon,\n useI18n,\n useTheme,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledGenAIAvatar,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\n\nregisterIcon(polarisSolidIcon);\n\ninterface StreamingContextProps {\n isStreamingMessage?: boolean;\n isStreamingInProgress?: boolean;\n}\n\n/** Metadata Context */\nexport const StreamingContext = createContext<StreamingContextProps>({\n isStreamingMessage: false,\n isStreamingInProgress: false\n});\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const theme = useTheme();\n const t = useI18n();\n\n const { message, announceInteraction, ...restProps } = props;\n const plainTextMessage = markdownToPlainText(message ?? '');\n let ariaLabel = plainTextMessage;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const {\n text: streamingMessage,\n isAnimationDone: isStreamingDone,\n animatedTillCursor\n } = useAnimatedText({\n text: message ?? '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: enableStreaming,\n tokenizeMarkdown: true,\n cursorStartIndex:\n isCoachMessage(props) && props.animationInitialCursorPos\n ? props.animationInitialCursorPos\n : undefined\n });\n\n useEffect(() => {\n if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n props.onAnimationCursorUpdate(animatedTillCursor);\n }\n }, [animatedTillCursor]);\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n // Consider streaming is done when we have all the chunks and all of them are rendered\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n const streamingContext: StreamingContextProps = useMemo(() => {\n return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n }, [isStreamingMessage, props]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n suggestions,\n onSend,\n loading,\n error,\n feedback,\n messageActions,\n markdownMap,\n onMessageActionClick\n } = props;\n\n const { reaction } = feedback ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (feedback && reaction) {\n selectedFeedbackResponse = t('selected_noun', [\n reaction === 'liked' ? t('good_response') : t('bad_response')\n ]);\n\n feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n }\n\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n : feedbackAriaLabel;\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <StreamingContext.Provider value={streamingContext}>\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n escapeHtmlInMarkdownText\n />\n </StreamingContext.Provider>\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n loading && <GenAIMessageProgress />\n )}\n </>\n );\n\n return (\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'row', pad: [1, 0], gap: 0.5 }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <StyledGenAIAvatar\n name={coachName}\n icon='polaris-solid'\n color={theme.base.palette.ai}\n shape='circle'\n size='m'\n />\n <StyledMessage>\n {/* Streaming loader and content */}\n {streamingContent}\n\n {loading || error ? (\n <>\n {loading && !isStreamingMessage && <GenAIMessageProgress />}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage && message && (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n )}\n\n {(feedback || messageActions) && (\n <Flex\n container={{ direction: 'row', gap: 1, pad: [1, undefined] }}\n as={StyledActionsContainer}\n onMouseDown={() => {\n onMessageActionClick?.(messageId);\n }}\n >\n {feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && (\n <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n {suggestions.map(({ id, message: prompt }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n return (\n <StyledUserMessage\n as={StyledUserMessage}\n data-testid={testIds.userMessage}\n {...restProps}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {message && <RichTextViewer content={message} type='markdown' />}\n </StyledUserMessage>\n );\n }\n\n return null;\n }\n);\n\nexport default GenAIMessage;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default } from './GenAICoach';
|
|
2
2
|
export type { GenAICoachProps, GenAIMessageProps, UserMessageProps, CoachMessageProps, MessageProps, UtilitiesGenAICoachProps, SendMessageProps, State } from './GenAICoach.types';
|
|
3
|
-
export { default as GenAIMessage } from './GenAIMessage';
|
|
3
|
+
export { default as GenAIMessage, StreamingContext } from './GenAIMessage';
|
|
4
4
|
export { default as InitialSuggestedMessage } from './InitialSuggestedMessage';
|
|
5
5
|
export { isUserMessage, isCoachMessage } from './GenAICoach.utils';
|
|
6
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,KAAK,EACN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,KAAK,EACN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default } from './GenAICoach';
|
|
2
|
-
export { default as GenAIMessage } from './GenAIMessage';
|
|
2
|
+
export { default as GenAIMessage, StreamingContext } from './GenAIMessage';
|
|
3
3
|
export { default as InitialSuggestedMessage } from './InitialSuggestedMessage';
|
|
4
4
|
export { isUserMessage, isCoachMessage } from './GenAICoach.utils';
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAWvC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAWvC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { default } from './GenAICoach';\nexport type {\n GenAICoachProps,\n GenAIMessageProps,\n UserMessageProps,\n CoachMessageProps,\n MessageProps,\n UtilitiesGenAICoachProps,\n SendMessageProps,\n State\n} from './GenAICoach.types';\nexport { default as GenAIMessage, StreamingContext } from './GenAIMessage';\nexport { default as InitialSuggestedMessage } from './InitialSuggestedMessage';\nexport { isUserMessage, isCoachMessage } from './GenAICoach.utils';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.21.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "8.
|
|
18
|
-
"@pega/cosmos-react-rte": "8.
|
|
17
|
+
"@pega/cosmos-react-core": "8.21.0",
|
|
18
|
+
"@pega/cosmos-react-rte": "8.21.0",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"@types/styled-components": "^5.1.26",
|