@pega/cosmos-react-work 7.0.0-build.22.2 → 7.0.0-build.22.21

package/lib/components/ArticleList/ArticleSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGnF,OAAO,aAAa,MAAM,0BAA0B,CAAC;AACrD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AAGjD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE1E,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,OAAO,CACL,MAAC,WAAW,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,KAAK,SAAS,aAC/C,KAAC,oBAAoB,IACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,GACV,EACF,KAAC,WAAW,cACV,KAAC,IAAI,cAAE,QAAQ,GAAQ,GACX,EACd,MAAC,UAAU,eACR,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,EACpC,IAAI,EAAE;4BACJ,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,MAAM;yBACd,YAED,KAAC,aAAa,IAEV,GAAG,QAAQ;4BACX,UAAU,EAAE,QAAQ,CAAC,EAAE;gCACrB,QAAQ,EAAE,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;4BAC5C,CAAC,GAEH,GACG,CACR,EACA,IAAI,IAAI,KAAC,WAAW,OAAK,IAAI,GAAI,EACjC,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1C,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,GAAG,EAAE,GAAG;4BACR,IAAI,EAAE,MAAM;yBACb,EACD,IAAI,EAAE;4BACJ,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,MAAM;yBACd,EACD,EAAE,EAAE,kBAAkB,YAErB,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAClC,KAAC,GAAG,IAEF,OAAO,EACL,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,kBAAkB,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7E,IAAI,IAAI,EAAE,IAJL,EAAE,CAIU,CACpB,CAAC,GACG,CACR,IACU,IACD,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { CardContent, CardFooter, Text, Flex, Tag } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport ArticleRating from '../Article/ArticleRating';\nimport ArticleMeta from '../Article/ArticleMeta';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\nimport ArticleSummaryHeader from './ArticleSummaryHeader';\nimport { ArticleCard, StyledQuickFilters } from './ArticleSummary.styles';\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const {\n    articleId,\n    href,\n    title,\n    abstract,\n    onTitleClick,\n    actions,\n    meta,\n    quickFilters,\n    onQuickFilterClick,\n    feedback,\n    ...restProps\n  } = props;\n  return (\n    <ArticleCard as='li' role='article' {...restProps}>\n      <ArticleSummaryHeader\n        articleId={articleId}\n        title={title}\n        actions={actions}\n        onTitleClick={onTitleClick}\n        href={href}\n      />\n      <CardContent>\n        <Text>{abstract}</Text>\n      </CardContent>\n      <CardFooter>\n        {feedback && (\n          <Flex\n            container={{ pad: [0.5, undefined] }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n          >\n            <ArticleRating\n              {...{\n                ...feedback,\n                onReaction: reaction => {\n                  feedback?.onReaction(articleId, reaction);\n                }\n              }}\n            />\n          </Flex>\n        )}\n        {meta && <ArticleMeta {...meta} />}\n        {quickFilters && quickFilters.length > 0 && (\n          <Flex\n            container={{\n              gap: 0.5,\n              wrap: 'wrap'\n            }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n            as={StyledQuickFilters}\n          >\n            {quickFilters.map(({ id, name }) => (\n              <Tag\n                key={id}\n                onClick={\n                  onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined\n                }\n              >{`#${name}`}</Tag>\n            ))}\n          </Flex>\n        )}\n      </CardFooter>\n    </ArticleCard>\n  );\n};\n\nexport default ArticleSummary;\n"]}
+{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,aAAa,MAAM,0BAA0B,CAAC;AACrD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AAGjD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,OAAO,CACL,MAAC,WAAW,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,KAAK,SAAS,aAC/C,KAAC,oBAAoB,IACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,GACV,EACF,KAAC,WAAW,cACV,KAAC,IAAI,cAAE,QAAQ,GAAQ,GACX,EACd,MAAC,UAAU,eACR,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,EACpC,IAAI,EAAE;4BACJ,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,MAAM;yBACd,YAED,KAAC,aAAa,IAEV,GAAG,QAAQ;4BACX,UAAU,EAAE,QAAQ,CAAC,EAAE;gCACrB,QAAQ,EAAE,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;4BAC5C,CAAC,GAEH,GACG,CACR,EACA,IAAI,IAAI,KAAC,WAAW,OAAK,IAAI,GAAI,EACjC,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1C,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CACnF,IACU,IACD,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { CardContent, CardFooter, Text, Flex } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport ArticleRating from '../Article/ArticleRating';\nimport ArticleMeta from '../Article/ArticleMeta';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\nimport ArticleSummaryHeader from './ArticleSummaryHeader';\nimport { ArticleCard } from './ArticleSummary.styles';\nimport ArticleTag from './ArticleTag';\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const {\n    articleId,\n    href,\n    title,\n    abstract,\n    onTitleClick,\n    actions,\n    meta,\n    quickFilters,\n    onQuickFilterClick,\n    feedback,\n    ...restProps\n  } = props;\n  return (\n    <ArticleCard as='li' role='article' {...restProps}>\n      <ArticleSummaryHeader\n        articleId={articleId}\n        title={title}\n        actions={actions}\n        onTitleClick={onTitleClick}\n        href={href}\n      />\n      <CardContent>\n        <Text>{abstract}</Text>\n      </CardContent>\n      <CardFooter>\n        {feedback && (\n          <Flex\n            container={{ pad: [0.5, undefined] }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n          >\n            <ArticleRating\n              {...{\n                ...feedback,\n                onReaction: reaction => {\n                  feedback?.onReaction(articleId, reaction);\n                }\n              }}\n            />\n          </Flex>\n        )}\n        {meta && <ArticleMeta {...meta} />}\n        {quickFilters && quickFilters.length > 0 && (\n          <ArticleTag quickFilters={quickFilters} onQuickFilterClick={onQuickFilterClick} />\n        )}\n      </CardFooter>\n    </ArticleCard>\n  );\n};\n\nexport default ArticleSummary;\n"]}

package/lib/components/ArticleList/ArticleSummaryHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Actions, Button, CardHeader, Link } from '@pega/cosmos-react-core';
 const ArticleSummaryHeader = ({ title, onTitleClick, href, actions, articleId }) => {
-    return (_jsx(CardHeader, { actions: actions?.length ? _jsx(Actions, { items: actions }) : undefined, children: href ? (_jsx(Link, { href: href, target: '_blank', children: title })) : (_jsx(Button, { variant: 'link', onClick: (e) => {
+    return (_jsx(CardHeader, { actions: actions?.length ? _jsx(Actions, { items: actions, compact: true }) : undefined, children: href ? (_jsx(Link, { href: href, target: '_blank', children: title })) : (_jsx(Button, { variant: 'link', onClick: (e) => {
                 onTitleClick?.(articleId, e);
             }, children: title })) }));
 };

package/lib/components/ArticleList/ArticleSummaryHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleSummaryHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummaryHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,OAAO,EACP,MAAM,EACN,UAAU,EACV,IAAI,EAGL,MAAM,yBAAyB,CAAC;AAUjC,MAAM,oBAAoB,GAAiD,CAAC,EAC1E,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,SAAS,EACV,EAAE,EAAE;IACH,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,SAAS,YAC3E,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,YAC9B,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;gBAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;YAC/B,CAAC,YAEA,KAAK,GACC,CACV,GACU,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import type { FunctionComponent, MouseEvent } from 'react';\n\nimport {\n  Actions,\n  Button,\n  CardHeader,\n  Link,\n  type NoChildrenProp,\n  type WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\n\ntype ArticleSummaryHeaderProps = WithAttributes<\n  'header',\n  NoChildrenProp &\n    Pick<ArticleSummaryProps, 'articleId' | 'title' | 'href' | 'onTitleClick' | 'actions'>\n>;\n\nconst ArticleSummaryHeader: FunctionComponent<ArticleSummaryHeaderProps> = ({\n  title,\n  onTitleClick,\n  href,\n  actions,\n  articleId\n}) => {\n  return (\n    <CardHeader actions={actions?.length ? <Actions items={actions} /> : undefined}>\n      {href ? (\n        <Link href={href} target='_blank'>\n          {title}\n        </Link>\n      ) : (\n        <Button\n          variant='link'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            onTitleClick?.(articleId, e);\n          }}\n        >\n          {title}\n        </Button>\n      )}\n    </CardHeader>\n  );\n};\n\nexport default ArticleSummaryHeader;\n"]}
+{"version":3,"file":"ArticleSummaryHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummaryHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,OAAO,EACP,MAAM,EACN,UAAU,EACV,IAAI,EAGL,MAAM,yBAAyB,CAAC;AAUjC,MAAM,oBAAoB,GAAiD,CAAC,EAC1E,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,SAAS,EACV,EAAE,EAAE;IACH,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,OAAO,SAAG,CAAC,CAAC,CAAC,SAAS,YACnF,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,YAC9B,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;gBAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;YAC/B,CAAC,YAEA,KAAK,GACC,CACV,GACU,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import type { FunctionComponent, MouseEvent } from 'react';\n\nimport {\n  Actions,\n  Button,\n  CardHeader,\n  Link,\n  type NoChildrenProp,\n  type WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\n\ntype ArticleSummaryHeaderProps = WithAttributes<\n  'header',\n  NoChildrenProp &\n    Pick<ArticleSummaryProps, 'articleId' | 'title' | 'href' | 'onTitleClick' | 'actions'>\n>;\n\nconst ArticleSummaryHeader: FunctionComponent<ArticleSummaryHeaderProps> = ({\n  title,\n  onTitleClick,\n  href,\n  actions,\n  articleId\n}) => {\n  return (\n    <CardHeader actions={actions?.length ? <Actions items={actions} compact /> : undefined}>\n      {href ? (\n        <Link href={href} target='_blank'>\n          {title}\n        </Link>\n      ) : (\n        <Button\n          variant='link'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            onTitleClick?.(articleId, e);\n          }}\n        >\n          {title}\n        </Button>\n      )}\n    </CardHeader>\n  );\n};\n\nexport default ArticleSummaryHeader;\n"]}

package/lib/components/ArticleList/ArticleTag.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type NoChildrenProp, type WithAttributes } from '@pega/cosmos-react-core';
+import type { ArticleSummaryProps } from './ArticleList.types';
+export type ArticleTagProps = WithAttributes<'div', NoChildrenProp & Pick<ArticleSummaryProps, 'quickFilters' | 'onQuickFilterClick'>>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ArticleTagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=ArticleTag.d.ts.map

package/lib/components/ArticleList/ArticleTag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleTag.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleTag.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,KAAK,EACL,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,oBAAoB,CAAC,CAClF,CAAC;;AAEF,wBA8BE"}

package/lib/components/ArticleList/ArticleTag.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Tag, Flex } from '@pega/cosmos-react-core';
+import { StyledQuickFilters } from './ArticleSummary.styles';
+export default forwardRef(function ArticleTag({ quickFilters, onQuickFilterClick, ...restProps }, ref) {
+    return (_jsx(Flex, { ...restProps, container: {
+            gap: 0.5,
+            wrap: 'wrap',
+            pad: [0.5, undefined, undefined]
+        }, item: {
+            grow: 1,
+            basis: '100%'
+        }, as: StyledQuickFilters, ref: ref, children: quickFilters &&
+            quickFilters.length > 0 &&
+            quickFilters.map(({ id, name }) => (_jsx(Tag, { onClick: onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined, children: name }, id))) }));
+});
+//# sourceMappingURL=ArticleTag.js.map

package/lib/components/ArticleList/ArticleTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleTag.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleTag.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAEL,GAAG,EACH,IAAI,EAGL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAO7D,eAAe,UAAU,CACvB,SAAS,UAAU,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IACzE,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,GAAG,EAAE,GAAG;YACR,IAAI,EAAE,MAAM;YACZ,GAAG,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC;SACjC,EACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,MAAM;SACd,EACD,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,GAAG,YAEP,YAAY;YACX,YAAY,CAAC,MAAM,GAAG,CAAC;YACvB,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACjC,KAAC,GAAG,IAEF,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,kBAAkB,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAEnF,IAAI,IAHA,EAAE,CAIH,CACP,CAAC,GACC,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import type { PropsWithoutRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport {\n  type RefElement,\n  Tag,\n  Flex,\n  type NoChildrenProp,\n  type WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\nimport { StyledQuickFilters } from './ArticleSummary.styles';\n\nexport type ArticleTagProps = WithAttributes<\n  'div',\n  NoChildrenProp & Pick<ArticleSummaryProps, 'quickFilters' | 'onQuickFilterClick'>\n>;\n\nexport default forwardRef<RefElement<ArticleTagProps>, PropsWithoutRef<ArticleTagProps>>(\n  function ArticleTag({ quickFilters, onQuickFilterClick, ...restProps }, ref) {\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          gap: 0.5,\n          wrap: 'wrap',\n          pad: [0.5, undefined, undefined]\n        }}\n        item={{\n          grow: 1,\n          basis: '100%'\n        }}\n        as={StyledQuickFilters}\n        ref={ref}\n      >\n        {quickFilters &&\n          quickFilters.length > 0 &&\n          quickFilters.map(({ id, name }) => (\n            <Tag\n              key={id}\n              onClick={onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined}\n            >\n              {name}\n            </Tag>\n          ))}\n      </Flex>\n    );\n  }\n);\n"]}

package/lib/components/ArticleList/index.d.ts

@@ -3,6 +3,7 @@ export type { ArticleListProps } from './ArticleList.types';
 export { default as ArticleSummary } from './ArticleSummary';
 export type { ArticleSummaryProps, AIArticleSummaryProps, Articles, QuickFilter } from './ArticleList.types';
 export { default as ArticleListFilter } from './ArticleListFilter';
-export type { ArticleBuddyProps, Reaction, BuddyListProps, BuddyResponseProps, AutoAnsweredItem, DetectedItem, ArticleFeedbackProps } from './ArticleList.types';
+export type { ArticleBuddyProps, Reaction, BuddyListProps, BuddyResponseProps, AutoAnsweredItem, DetectedItem, ArticleFeedbackProps, SearchArticle } from './ArticleList.types';
 export { default as ArticleBuddy } from './ArticleBuddy';
+export { default as ArticleSemanticSearch } from './ArticleSemanticSearch';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ArticleList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/ArticleList/index.js

@@ -2,4 +2,5 @@ export { default } from './ArticleList';
 export { default as ArticleSummary } from './ArticleSummary';
 export { default as ArticleListFilter } from './ArticleListFilter';
 export { default as ArticleBuddy } from './ArticleBuddy';
+export { default as ArticleSemanticSearch } from './ArticleSemanticSearch';
 //# sourceMappingURL=index.js.map

package/lib/components/ArticleList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAO7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport type { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport type {\n  ArticleSummaryProps,\n  AIArticleSummaryProps,\n  Articles,\n  QuickFilter\n} from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\nexport type {\n  ArticleBuddyProps,\n  Reaction,\n  BuddyListProps,\n  BuddyResponseProps,\n  AutoAnsweredItem,\n  DetectedItem,\n  ArticleFeedbackProps\n} from './ArticleList.types';\nexport { default as ArticleBuddy } from './ArticleBuddy';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAO7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAWnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport type { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport type {\n  ArticleSummaryProps,\n  AIArticleSummaryProps,\n  Articles,\n  QuickFilter\n} from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\nexport type {\n  ArticleBuddyProps,\n  Reaction,\n  BuddyListProps,\n  BuddyResponseProps,\n  AutoAnsweredItem,\n  DetectedItem,\n  ArticleFeedbackProps,\n  SearchArticle\n} from './ArticleList.types';\nexport { default as ArticleBuddy } from './ArticleBuddy';\nexport { default as ArticleSemanticSearch } from './ArticleSemanticSearch';\n"]}

package/lib/components/CaseView/UtilitiesSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/C,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,wGAiBlC,CAAC;AAoEF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkB/C,OAAO,KAAK,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,wGAiBlC,CAAC;AA+EF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CaseView/UtilitiesSummary.js

@@ -1,7 +1,8 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Button, Card, Count, Flex, Icon, Tooltip, useI18n, VisuallyHiddenText, useElement } from '@pega/cosmos-react-core';
+import { mix } from 'polished';
+import { Button, Card, Count, Flex, Icon, Tooltip, useI18n, VisuallyHiddenText, useElement, tryCatch, defaultThemeProp } from '@pega/cosmos-react-core';
 export const StyledUtilitiesSummary = styled.ul `
   width: 2.75rem;
   list-style: none;
@@ -20,19 +21,23 @@ export const StyledUtilitiesSummary = styled.ul `
     }
   }
 `;
-const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
-    padding-block: ${theme.base.spacing};
+const StyledUtilitySummaryButton = styled(Button)(({ theme: { base: { palette, spacing } } }) => {
+    const hoverBackground = tryCatch(() => mix(0.9, palette['primary-background'], palette['foreground-color']));
+    return css `
+    padding-block: ${spacing};
     padding-inline: 0;
     width: 100%;
     color: currentColor;
     border-radius: unset;
     border: none;
+    background: ${palette['primary-background']};
 
     & + & {
       margin: 0;
     }
 
     &:hover {
+      background: ${hoverBackground};
       color: currentColor;
     }
 
@@ -49,7 +54,9 @@ const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
       border-end-start-radius: inherit;
       border-end-end-radius: inherit;
     }
-  `);
+  `;
+});
+StyledUtilitySummaryButton.defaultProps = defaultThemeProp;
 const UtilitySummary = ({ name, iconName, count, onClick }) => {
     const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement();
     return (

package/lib/components/CaseView/UtilitiesSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;CAiB9C,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO;IACL,2EAA2E;IAC3E,uDAAuD;IACvD,cAAI,IAAI,EAAC,UAAU,aACjB,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,cAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9D,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACP,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  Count,\n  Flex,\n  Icon,\n  Tooltip,\n  useI18n,\n  VisuallyHiddenText,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport type { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.ul`\n  width: 2.75rem;\n  list-style: none;\n\n  > li {\n    display: contents;\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n  }\n`;\n\nconst StyledUtilitySummaryButton = styled(Button)(\n  ({ theme }) => css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: 0;\n    width: 100%;\n    color: currentColor;\n    border-radius: unset;\n    border: none;\n\n    & + & {\n      margin: 0;\n    }\n\n    &:hover {\n      color: currentColor;\n    }\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n  `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n  name,\n  iconName,\n  count,\n  onClick\n}) => {\n  const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n  return (\n    // Default role is removed by \"list-style: none\" on StyledUtilitiesSummary.\n    // eslint-disable-next-line jsx-a11y/no-redundant-roles\n    <li role='listitem'>\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: 'center',\n          gap: 0.5\n        }}\n        onClick={onClick}\n        ref={setUtilSummaryTooltip}\n        as={StyledUtilitySummaryButton}\n      >\n        <Icon name={iconName} />\n        {count !== undefined && <Count aria-hidden>{count}</Count>}\n        <VisuallyHiddenText>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n      </Flex>\n\n      <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n        {name}\n      </Tooltip>\n    </li>\n  );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n\n  return (\n    <Card\n      container={{ direction: 'column', alignItems: 'center' }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => (\n        <UtilitySummary {...item} key={item.iconName} />\n      ))}\n    </Card>\n  );\n};\n\nexport default UtilitiesSummary;\n"]}
+{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;CAiB9C,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EACjD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CACpC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC,CACrE,CAAC;IACF,OAAO,GAAG,CAAA;qBACS,OAAO;;;;;;kBAMV,OAAO,CAAC,oBAAoB,CAAC;;;;;;;oBAO3B,eAAe;;;;;;;;;;;;;;;;;GAiBhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO;IACL,2EAA2E;IAC3E,uDAAuD;IACvD,cAAI,IAAI,EAAC,UAAU,aACjB,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,cAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9D,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACP,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  Button,\n  Card,\n  Count,\n  Flex,\n  Icon,\n  Tooltip,\n  useI18n,\n  VisuallyHiddenText,\n  useElement,\n  tryCatch,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport type { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.ul`\n  width: 2.75rem;\n  list-style: none;\n\n  > li {\n    display: contents;\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n  }\n`;\n\nconst StyledUtilitySummaryButton = styled(Button)(({\n  theme: {\n    base: { palette, spacing }\n  }\n}) => {\n  const hoverBackground = tryCatch(() =>\n    mix(0.9, palette['primary-background'], palette['foreground-color'])\n  );\n  return css`\n    padding-block: ${spacing};\n    padding-inline: 0;\n    width: 100%;\n    color: currentColor;\n    border-radius: unset;\n    border: none;\n    background: ${palette['primary-background']};\n\n    & + & {\n      margin: 0;\n    }\n\n    &:hover {\n      background: ${hoverBackground};\n      color: currentColor;\n    }\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n  `;\n});\n\nStyledUtilitySummaryButton.defaultProps = defaultThemeProp;\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n  name,\n  iconName,\n  count,\n  onClick\n}) => {\n  const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n  return (\n    // Default role is removed by \"list-style: none\" on StyledUtilitiesSummary.\n    // eslint-disable-next-line jsx-a11y/no-redundant-roles\n    <li role='listitem'>\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: 'center',\n          gap: 0.5\n        }}\n        onClick={onClick}\n        ref={setUtilSummaryTooltip}\n        as={StyledUtilitySummaryButton}\n      >\n        <Icon name={iconName} />\n        {count !== undefined && <Count aria-hidden>{count}</Count>}\n        <VisuallyHiddenText>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n      </Flex>\n\n      <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n        {name}\n      </Tooltip>\n    </li>\n  );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n\n  return (\n    <Card\n      container={{ direction: 'column', alignItems: 'center' }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => (\n        <UtilitySummary {...item} key={item.iconName} />\n      ))}\n    </Card>\n  );\n};\n\nexport default UtilitiesSummary;\n"]}

package/lib/components/CaseView/UtilitySummaryItemDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAyC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIA2C5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/lib/components/CaseView/UtilitySummaryItemDialog.js

@@ -18,7 +18,6 @@ const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({
     });
     useEscape(() => {
         onDismiss?.();
-        target.focus();
     }, dialogRef);
     useFocusTrap(dialogRef, false);
     useEffect(() => {
@@ -28,6 +27,9 @@ const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({
         else if (dialogRef.current) {
             focusHeadingOrContainer(dialogRef.current);
         }
+        return () => {
+            target.focus();
+        };
     }, []);
     const { start } = useDirection();
     return (_jsx(StyledUtilitySummaryItemDialog, { ref: dialogRef, target: target, arrow: true, placement: `${start}-start`, children: children }));

package/lib/components/CaseView/UtilitySummaryItemDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QAClD,qEAAqE;QACrE,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClD,OAAO;SACR;QACD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,UAAU,CAAC,CAAC,CAAC;YAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACpC,IAAI,SAAS,CAAC,OAAO,EAAE;YAC1B,uBAAuB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SAC5C;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  focusHeadingOrContainer,\n  useConsolidatedRef,\n  useDirection,\n  useFocusTrap,\n  useEscape,\n  useOuterEvent,\n  getFocusables\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n  width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n  'div',\n  {\n    target: BaseDialogProps['target'];\n    onDismiss?: () => void;\n  }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n  RefElement<UtilitySummaryItemDialogProps>,\n  PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n  const dialogRef = useConsolidatedRef(ref);\n\n  useOuterEvent('mousedown', [dialogRef, target], e => {\n    // FIXME: This targets the modal backdrop. We need a better solution.\n    if ((e.target as Element).closest('[opacity=\"1\"]')) {\n      return;\n    }\n    onDismiss?.();\n  });\n\n  useEscape(() => {\n    onDismiss?.();\n    target.focus();\n  }, dialogRef);\n\n  useFocusTrap(dialogRef, false);\n\n  useEffect(() => {\n    const focusables = getFocusables(dialogRef);\n    if (focusables[0]) focusables[0].focus();\n    else if (dialogRef.current) {\n      focusHeadingOrContainer(dialogRef.current);\n    }\n  }, []);\n\n  const { start } = useDirection();\n\n  return (\n    <StyledUtilitySummaryItemDialog\n      ref={dialogRef}\n      target={target}\n      arrow\n      placement={`${start}-start`}\n    >\n      {children}\n    </StyledUtilitySummaryItemDialog>\n  );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}
+{"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QAClD,qEAAqE;QACrE,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClD,OAAO;SACR;QACD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,UAAU,CAAC,CAAC,CAAC;YAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACpC,IAAI,SAAS,CAAC,OAAO,EAAE;YAC1B,uBAAuB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SAC5C;QACD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  focusHeadingOrContainer,\n  useConsolidatedRef,\n  useDirection,\n  useFocusTrap,\n  useEscape,\n  useOuterEvent,\n  getFocusables\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n  width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n  'div',\n  {\n    target: BaseDialogProps['target'];\n    onDismiss?: () => void;\n  }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n  RefElement<UtilitySummaryItemDialogProps>,\n  PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n  const dialogRef = useConsolidatedRef(ref);\n\n  useOuterEvent('mousedown', [dialogRef, target], e => {\n    // FIXME: This targets the modal backdrop. We need a better solution.\n    if ((e.target as Element).closest('[opacity=\"1\"]')) {\n      return;\n    }\n    onDismiss?.();\n  });\n\n  useEscape(() => {\n    onDismiss?.();\n  }, dialogRef);\n\n  useFocusTrap(dialogRef, false);\n\n  useEffect(() => {\n    const focusables = getFocusables(dialogRef);\n    if (focusables[0]) focusables[0].focus();\n    else if (dialogRef.current) {\n      focusHeadingOrContainer(dialogRef.current);\n    }\n    return () => {\n      target.focus();\n    };\n  }, []);\n\n  const { start } = useDirection();\n\n  return (\n    <StyledUtilitySummaryItemDialog\n      ref={dialogRef}\n      target={target}\n      arrow\n      placement={`${start}-start`}\n    >\n      {children}\n    </StyledUtilitySummaryItemDialog>\n  );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}

package/lib/components/GenAICoach/GenAICoach.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import type { GenAICoachProps } from './GenAICoach.types';
+import { type GenAICoachProps } from '.';
 declare const _default: FunctionComponent<GenAICoachProps> & {
     getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
 };

package/lib/components/GenAICoach/GenAICoach.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAmC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;;;AA4Z1D,wBAA6D"}
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAyD5D,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;;;;AA8hBhF,wBAA6D"}

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flex, Grid, Icon, MenuButton, Progress, Text, TextArea, createUID, menuHelpers, useBreakpoint, useI18n, useTestIds, useTheme, withTestIds, Card, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState } from '@pega/cosmos-react-core';
+import { Button, Flex, Grid, Icon, MenuButton, Progress, Text, TextArea, createUID, menuHelpers, useBreakpoint, useI18n, useTestIds, useTheme, withTestIds, Card, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, Tooltip, useElement, useArrows, focusableSelector, useLiveLog, useOuterEvent } from '@pega/cosmos-react-core';
 import * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
@@ -8,23 +8,30 @@ import * as minusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mi
 import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
 import CaseViewContext from '../CaseView/CaseView.context';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
-import { StyledChatButton, StyledCloseButton, StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMessageWrapper, StyledStarterMessage, StyledSuggestions } from './GenAICoach.styles';
 import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
+import { StyledChatButton, StyledCloseButton, StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledStarterMessage, StyledSuggestions, StyledStarterMessageCard, StyledMessagesList } from './GenAICoach.styles';
 import { GenAIMessage, InitialSuggestedMessage } from '.';
 registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon);
 const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, starterMessage, variant, onOpen, ...restProps }) => {
+    const theme = useTheme();
+    const t = useI18n();
     const elementRef = useRef(null);
     const conversationRef = useRef(null);
     const genAICoachRef = useRef(null);
+    const [starterMessageElement, setStarterMessageElement] = useElement(null);
+    const focusInMessageListRef = useRef(false);
+    const lastFocusedMessageRef = useRef(null);
+    const initialFocusedElementRef = useRef(null);
+    const messageContainerRef = useRef(null);
     const textAreaRef = useRef(null);
     const [message, setMessage] = useState('');
     const [coachOptions, setCoachOptions] = useState(coachOptionsProps);
+    const [arrowKey, setArrowKey] = useState(null);
     const smOrAbove = useBreakpoint('sm', { breakpointRef: genAICoachRef });
-    const previousMessages = usePrevious(messages);
-    const theme = useTheme();
-    const t = useI18n();
     const { setGenAIHeight, aboveLG } = useContext(CaseViewContext);
+    const previousMessages = usePrevious(messages);
     const testIds = useTestIds(testId, getGenAICoachTestIds);
+    const { announcePolite } = useLiveLog();
     const onCoachChange = (id) => {
         setCoachOptions(cur => {
             return cur.map(coach => {
@@ -61,11 +68,6 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const handleTextAreaChange = useCallback((e) => {
         setMessage(e.currentTarget.value);
     }, [setMessage]);
-    const scrollToBottom = () => {
-        if (conversationRef.current) {
-            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
-        }
-    };
     const renderCoachOptions = useMemo(() => {
         if (coachOptions.length === 0 || !selectedCoach) {
             return null;
@@ -82,6 +84,14 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const headerContent = useMemo(() => {
         return isInUtilities(variant) && variant.state === 'docked' ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h3', children: selectedCoach })] }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Button, { icon: true, label: t('maximize'), "aria-label": t('maximize_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: () => variant.onStateChange('maximized'), children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, isInUtilities(variant) && (_jsx(Button, { icon: true, label: t('minimize'), "aria-label": t('minimize_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: () => variant.onStateChange('docked'), children: _jsx(Icon, { name: 'minus' }) })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] }));
     }, [variant, coachOptions]);
+    const setLastFocusableElement = () => {
+        focusInMessageListRef.current = false;
+        lastFocusedMessageRef.current = conversationRef?.current?.querySelector(':focus') || null;
+        if (lastFocusedMessageRef.current &&
+            lastFocusedMessageRef.current?.tagName.toLowerCase() !== 'li') {
+            lastFocusedMessageRef.current = lastFocusedMessageRef.current.closest('li[type="message"]');
+        }
+    };
     const onResize = () => {
         if (genAICoachRef.current) {
             const height = genAICoachRef.current.clientHeight;
@@ -92,18 +102,19 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         if (isInUtilities(variant)) {
             onResize();
         }
-    }, [variant]);
-    useEffect(() => {
-        onResize();
         if (variant.placement !== 'fullpage') {
             textAreaRef.current?.focus();
+            elementRef.current = null;
         }
+    }, [variant]);
+    useEffect(() => {
+        onResize();
         if (isInUtilities(variant) &&
             variant.state === 'docked' &&
             getFocusables(genAICoachRef).length > 0) {
             getFocusables(genAICoachRef)[0].focus();
         }
-    }, [textAreaRef.current]);
+    }, []);
     useEffect(() => {
         onOpen?.();
         window.addEventListener('resize', onResize);
@@ -115,41 +126,147 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         if (isInUtilities(variant) && variant.state !== 'maximized' && messages.length > 0) {
             variant.onStateChange('maximized');
         }
-        if (messages.length > 0 && previousMessages?.length !== messages.length) {
+        if (messages.length > 0 && previousMessages && previousMessages?.length < messages.length) {
             setTimeout(() => {
-                scrollToBottom();
+                conversationRef.current?.lastElementChild?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
             }, 0);
-            if (isUserMessage(messages[messages.length - 1]))
+            if (isUserMessage(messages[messages.length - 1])) {
                 textAreaRef.current?.focus();
+                setLastFocusableElement();
+                elementRef.current = null;
+                setArrowKey(null);
+            }
+            else {
+                announcePolite({ message: t('coach', [`${t('new_message')} ${t('from')}`]) });
+            }
         }
     }, [messages]);
-    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, starterMessage: starterMessage, ref: genAICoachRef, aboveLG: aboveLG, ...restProps, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: headerContent }), ((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMessagesContainer, ref: conversationRef, container: starterMessage || loading || error
+    /** Supports arrow key behaviors */
+    useEffect(() => {
+        const focusables = getFocusables(elementRef);
+        if (arrowKey === 'ArrowRight') {
+            focusables[0]?.focus();
+        }
+        else if (arrowKey === 'ArrowLeft') {
+            focusables[focusables.length - 1]?.focus();
+        }
+    }, [arrowKey, elementRef.current]);
+    useArrows(conversationRef, {
+        cycle: true,
+        selector: ':scope > li',
+        dir: 'up-down',
+        allowTabFocus: true,
+        initialFocusElement: initialFocusedElementRef.current
+    }, [messages, initialFocusedElementRef.current]);
+    useArrows(elementRef, {
+        cycle: true,
+        selector: `li ${focusableSelector}`,
+        dir: 'left-right',
+        allowTabFocus: true,
+        updateTabIndex: false
+    }, [messages, elementRef.current, arrowKey]);
+    useOuterEvent('mousedown', [conversationRef.current], () => {
+        setArrowKey(null);
+        focusInMessageListRef.current = false;
+    });
+    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, starterMessage: starterMessage, ref: genAICoachRef, aboveLG: aboveLG, ...restProps, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: headerContent }), ((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMessagesContainer, ref: messageContainerRef, container: starterMessage || loading || error
                             ? { direction: 'column', pad: [0, 2], justify: 'center' }
-                            : { direction: 'column', pad: [0, 2] }, item: { grow: 1 }, children: loading || error ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'block', message: typeof loading === 'string' ? loading : t('loading') })) : (_jsx(ErrorState, { message: error })) })) : (_jsx(_Fragment, { children: messages.length === 0 ? (_jsx(_Fragment, { children: starterMessage ? (_jsxs(Card, { container: { alignItems: 'center', pad: 1, justify: 'between' }, item: { grow: 0 }, as: StyledStarterMessage, children: [starterMessage.message, _jsx(StyledCloseButton, { icon: true, label: t('close'), "aria-label": `${t('close')} ${t('starter_message')}`, variant: 'simple', onClick: starterMessage.onClose, children: _jsx(Icon, { name: 'times' }) })] })) : (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
+                            : { direction: 'column', pad: [0, 2] }, item: { grow: 1 }, children: loading || error ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'block', message: typeof loading === 'string' ? loading : t('loading') })) : (_jsx(ErrorState, { message: error })) })) : (_jsx(_Fragment, { children: messages.length === 0 ? (_jsx(_Fragment, { children: starterMessage ? (_jsxs(Card, { container: { alignItems: 'center', pad: 1, justify: 'between' }, item: { grow: 0 }, as: StyledStarterMessageCard, children: [_jsx(StyledStarterMessage, { ref: setStarterMessageElement, children: starterMessage.message }), starterMessage.message && starterMessageElement && (_jsx(Tooltip, { target: starterMessageElement, smart: true, children: starterMessage.message })), _jsx(StyledCloseButton, { icon: true, label: t('close'), "aria-label": `${t('close')} ${t('starter_message')}`, variant: 'simple', onClick: starterMessage.onClose, children: _jsx(Icon, { name: 'times' }) })] })) : (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
                                         justify: 'center',
                                         direction: 'column',
                                         gap: 8
                                     }, item: { grow: 1 }, children: [((isInUtilities(variant) && variant.state === 'maximized') ||
                                             !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { name: 'polaris-solid', size: 'l', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h2', children: t('welcome_text') })] })), _jsx(Grid, { container: { cols: smOrAbove ? 'repeat(2, 1fr)' : '1fr', gap: 1.5 }, children: initialSuggestedMessages?.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
                                                     onSend(initialMessage);
-                                                }, testId: initialSuggestedMessage.id }))) })] })) })) : (_jsx(_Fragment, { children: messages.map(item => {
+                                                }, testId: initialSuggestedMessage.id }))) })] })) })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, container: { direction: 'column' }, onFocus: () => {
+                                    if (!focusInMessageListRef.current) {
+                                        if (lastFocusedMessageRef.current) {
+                                            lastFocusedMessageRef.current.focus();
+                                        }
+                                        else {
+                                            /** Focus on the latest message if the chat message list was never focused */
+                                            const lastChild = conversationRef.current && conversationRef.current.lastElementChild;
+                                            if (lastChild instanceof HTMLElement) {
+                                                lastChild.focus();
+                                            }
+                                        }
+                                    }
+                                    focusInMessageListRef.current = true;
+                                    setArrowKey(null);
+                                }, onKeyDown: (e) => {
+                                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                                        setArrowKey(e.key);
+                                        elementRef.current = null;
+                                    }
+                                    else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                                        const currentElement = conversationRef.current?.querySelector('li:focus');
+                                        if (currentElement && currentElement instanceof HTMLElement) {
+                                            elementRef.current = currentElement;
+                                        }
+                                        else {
+                                            elementRef.current =
+                                                conversationRef.current
+                                                    ?.querySelector(':focus')
+                                                    ?.closest('li[type="message"]') || null;
+                                        }
+                                        initialFocusedElementRef.current = elementRef.current;
+                                        if (currentElement && getFocusables(currentElement).length > 0) {
+                                            setArrowKey(e.key);
+                                        }
+                                    }
+                                    else if (e.key === 'Tab') {
+                                        setLastFocusableElement();
+                                        if (e.shiftKey) {
+                                            const prevElement = conversationRef.current?.parentElement?.previousElementSibling;
+                                            if (prevElement) {
+                                                const focusables = getFocusables(prevElement);
+                                                if (focusables.length) {
+                                                    e.preventDefault();
+                                                    focusables[focusables.length - 1].focus();
+                                                }
+                                            }
+                                        }
+                                        else {
+                                            const nextElement = conversationRef.current?.parentElement?.nextElementSibling;
+                                            if (nextElement) {
+                                                const focusables = getFocusables(nextElement);
+                                                if (focusables.length) {
+                                                    e.preventDefault();
+                                                    focusables[0].focus();
+                                                }
+                                            }
+                                        }
+                                        setArrowKey(null);
+                                    }
+                                }, children: messages.map(item => {
                                     const messageProps = isCoachMessage(item)
                                         ? {
                                             ...item,
                                             onSend
                                         }
                                         : item;
-                                    return (_jsx(StyledMessageWrapper, { ref: elementRef, children: _jsx(GenAIMessage, { ...messageProps, testId: item.id }) }));
+                                    return _jsx(GenAIMessage, { ...messageProps, testId: item.id });
                                 }) })) })) }), !starterMessage &&
                         ((isInUtilities(variant) &&
                             variant.state !== 'docked' &&
                             variant.state !== 'minimized') ||
-                            !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: [_jsx(TextArea, { ref: textAreaRef, label: t('message_pega_gen_ai_coach', [selectedCoach || '']), value: message, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, autoResize: false }), _jsxs(Flex, { container: { direction: 'row', gap: 2, justify: 'end', pad: 1 }, children: [suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'text', as: StyledSuggestions, icon: 'polaris-solid', menu: {
+                            !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: [_jsx(TextArea, { ref: textAreaRef, label: t('message_pega_gen_ai_coach', [selectedCoach || '']), value: message, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, autoResize: false }), _jsxs(Flex, { container: {
+                                    direction: 'row',
+                                    gap: 2,
+                                    justify: 'end',
+                                    pad: 1
+                                }, children: [suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'text', as: StyledSuggestions, icon: 'polaris-solid', menu: {
                                             items: suggestions,
                                             onItemClick: id => {
                                                 const selected = menuHelpers.getItem(suggestions, id);
                                                 if (selected)
-                                                    onSend({ id: selected.id, message: selected.primary });
+                                                    onSend({
+                                                        id: selected.id,
+                                                        message: selected.primary
+                                                    });
                                             }
                                         } })), _jsx(Button, { variant: 'primary', onClick: message
                                             ? () => {
@@ -166,7 +283,10 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                             if (isInUtilities(variant))
                                 variant.onStateChange('maximized');
                             if (starterMessage && starterMessage.message) {
-                                onSend({ id: starterMessage.id, message: starterMessage.message });
+                                onSend({
+                                    id: starterMessage.id,
+                                    message: starterMessage.message
+                                });
                             }
                         }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid' }), t('start_chat')] }) }))] }))] }));
 };