.aiBorder {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    height: calc(100% - 0.4px);
    top: 0px;
    right: 0px;
    bottom: 0.4px;
    left: 0px;
    border-radius: var(--container-radius-dialog) var(--container-radius-dialog) 0px 0px;
    border-top: var(--container-borderwidth-AIgradient) solid var(--color-forestgreen);
    box-sizing: border-box;
    z-index: 0;
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.aiIcon {
    width: var(--status-size-icon-M);
    position: relative;
    height: var(--status-size-icon-M);
}
.iconneutral {
    align-self: stretch;
    width: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.createDocumentWith {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.headingWrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--container-space-generic-header-xg-M1);
}
.subheading {
    align-self: stretch;
    position: relative;
    font-size: var(--global-fontSize-adaptive-step1);
    line-height: 150%;
    font-weight: 500;
    color: var(--container-color-standard-text-alt);
}
.headingWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--container-space-generic-header-yg-M);
    z-index: 1;
}
.closeIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.closeButton {
    border-radius: var(--button-radius-subtle-S);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-subtle-y-S) var(--button-space-subtle-x-S);
    box-sizing: border-box;
    min-width: var(--button-size-S);
    min-height: var(--button-size-S);
    z-index: 2;
}
.border {
    position: absolute;
    width: calc(100% + 1px);
    top: calc(50% - 0px);
    right: -0.5px;
    left: -0.5px;
    border-top: 1px solid var(--container-color-standard-border-default);
    box-sizing: border-box;
    height: 1px;
}
.divider {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0.4px;
    left: 0px;
    height: 1px;
    z-index: 3;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: var(--container-radius-dialog) var(--container-radius-dialog) 0px 0px;
    background-color: var(--container-color-standard-bg-default);
    width: 760px;
    height: 109.4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--container-space-generic-header-y-M);
    box-sizing: border-box;
    gap: var(--container-space-generic-header-xg-M);
    font-family: var(--font-sage-text);
}
.label {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.dot {
    width: var(--form-size-radio-dot-M);
    position: relative;
    border-radius: 50%;
    background-color: var(--form-color-typical-icon-active);
    height: var(--form-size-radio-dot-M);
}
.circle {
    width: var(--form-size-radio-circle-M);
    border-radius: var(--form-radius-radio);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-radio-circle-M);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.keyline1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    border-radius: var(--form-radius-progressivebar);
    background-color: var(--form-color-typical-border-alt);
}
.keyline {
    align-self: stretch;
    width: 2px;
    position: relative;
}
.keylineWrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 0px var(--form-space-integral-progressive-y-M);
}
.circleWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}
.iconAndLabelWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.secondaryLabel {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: var(--form-color-labelset-label-alt);
}
.span {
    color: #cd384b;
}
.selectedOption1 {
    position: relative;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selectedOption {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.caretLargeDownIcon {
    width: var(--form-size-icon-M);
    position: relative;
    height: var(--form-size-icon-M);
}
.inputWrapper {
    align-self: stretch;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: var(--form-space-input-y-M) var(--form-space-input-x-M);
    gap: var(--form-space-dropdown-option-xg-M);
}
.inputContainer {
    align-self: stretch;
    border-radius: var(--form-radius-input);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--form-size-input-M);
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
    color: var(--form-color-typical-text-enabled);
}
.dropdownTypical1 {
    width: 339px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-yg-M1);
}
.dropdownTypical {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.nestedComponent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--form-space-integral-progressive-y-M) 0px;
    font-size: var(--global-fontSize-adaptive-step01);
    color: var(--container-color-standard-text-default);
}
.contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.option1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-xg-M);
}
.circle1 {
    width: var(--form-size-radio-circle-M);
    border-radius: var(--form-radius-radio);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-radio-circle-M);
}
.keylineWrapper1 {
    width: 2px;
    flex: 1;
}
.contentWrapper1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
}
.radioButtonList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-input-yg-M);
    font-size: var(--font-size-sm);
}
.radioButtonVerticalGroup {
    width: 391px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-yg-M);
}
.verticalPaddingLayout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 760px;
    height: 430px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-5xl);
    box-sizing: border-box;
}
.modalContentWrapper {
    position: absolute;
    top: 109.4px;
    left: 0px;
    width: 760px;
    height: 430px;
    font-size: var(--global-fontSize-adaptive-step0);
    color: var(--form-color-labelset-label-default);
}
.ghostContainer {
    flex: 1;
    position: relative;
    height: 0px;
}
.paddingTop {
    width: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--button-space-layout-y-S) 0px 0px;
    box-sizing: border-box;
}
.ghostContainer1 {
    align-self: stretch;
    width: 0px;
    position: relative;
}
.paddingLeft {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 0px var(--button-space-layout-x-M);
}
.label3 {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.button4 {
    border-radius: var(--button-radius-tertiary-M);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-tertiary-y-M) var(--button-space-tertiary-x-M);
    box-sizing: border-box;
    min-height: var(--button-size-M);
}
.button1 {
    border-radius: var(--button-radius-secondary-M);
    background: linear-gradient(90deg, rgba(19, 160, 56, 0.08), rgba(20, 145, 151, 0.08) 40%, rgba(168, 124, 251, 0.08) 90%);
    border: var(--button-borderwidth-secondary) solid var(--color-forestgreen);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-secondary-y-M) var(--button-space-primary-x-M);
    min-height: var(--button-size-M1);
    color: var(--button-color-ai-label-hover);
}
.buttonWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: center;
    gap: var(--button-space-layout-xg-M);
}
.paddingRight {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px var(--button-space-layout-x-M) 0px 0px;
}
.paddingWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.paddingBottom {
    width: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px var(--button-space-layout-y-S);
    box-sizing: border-box;
}
.buttonLayout {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}
.footer {
    position: absolute;
    top: 539.4px;
    left: 0px;
    background-color: var(--container-color-standard-bg-default);
    width: 760px;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: flex-end;
    max-height: var(--container-size-footer-L);
    font-size: var(--global-fontSize-adaptive-step02);
    color: var(--modes-color-interactive-primary-legacy-default);
}
.dialogModal {
    width: 100%;
    position: relative;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1), 10px 10px 60px rgba(0, 0, 0, 0.1);
    border-radius: var(--container-radius-dialog);
    background-color: var(--container-color-standard-bg-default);
    height: 611px;
    overflow-y: auto;
    text-align: left;
    font-size: var(--global-fontSize-adaptive-step3);
    color: var(--container-color-standard-text-default);
    font-family: var(--font-sage-ui);
}

import { FunctionComponent, useCallback } from 'react';
import styles from './DialogModal.module.css';

const DialogModal:FunctionComponent = () => {

  	const onWrapperContainerClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

            						Create document with Sage Copilot

Draft a document by selecting a document topic or writing your own prompt.

Select a method to draft your document

Select from document topics

Choose from common HR document topics.

                            														{`Select a document topic `}
                            														*

Select

Write your own prompt

Help Copilot by describing this document in a few words.

Cancel

Draft with Copilot

);
};

export default DialogModal;

@import url('https://fonts.googleapis.com/css2?family=Sage+Text:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500&display=swap');
body {
  	margin: 0; line-height: normal;
}
:root {

  	/* Fonts */
  	--font-sage-ui: 'Sage UI';
  	--font-sage-text: 'Sage Text';

  	/* font sizes */
  	--font-size-sm: 14px;

  	/* Colors */
  	--color-forestgreen: #13a038;

  	/* Gaps */
  	--gap-5xs: 8px;

  	/* Paddings */
  	--padding-5xl: 24px;

  	/* Border radiuses */
  	--br-5xl: 24px;

  	/* Effects */
  	--container-boxshadow-dialog: 0px 3px 4px rgba(0, 0, 0, 0.1), 10px 10px 60px rgba(0, 0, 0, 0.1);

  	/* Figma Variables */

  	/* Color Variables */
  	--button-color-ai-label-hover: #000;
  	--container-color-standard-bg-default: #fff;
  	--container-color-standard-border-default: #e8e8e8;
  	--container-color-standard-text-alt: rgba(0, 0, 0, 0.55);
  	--container-color-standard-text-default: rgba(0, 0, 0, 0.95);
  	--form-color-labelset-label-alt: rgba(0, 0, 0, 0.55);
  	--form-color-labelset-label-default: rgba(0, 0, 0, 0.95);
  	--form-color-typical-bg-enabled: #fff;
  	--form-color-typical-border-alt: #a6a6a6;
  	--form-color-typical-border-enabled: #777;
  	--form-color-typical-icon-active: #000;
  	--form-color-typical-text-enabled: rgba(0, 0, 0, 0.95);
  	--modes-color-interactive-primary-legacy-default: #007e45;

  	/* Number Variables */
  	--form-borderwidth-input: 1px;
  	--form-size-progressive-bar: 2px;
  	--form-radius-progressivebar: 2px;
  	--button-borderwidth-secondary: 2px;
  	--container-space-generic-header-yg-M: 4px;
  	--button-space-subtle-xg-S: 4px;
  	--button-space-subtle-y-S: 4px;
  	--form-space-dropdown-option-xg-M: 4px;
  	--container-borderwidth-AIgradient: 6px;
  	--button-space-subtle-x-S: 8px;
  	--form-space-integral-yg-M: 8px;
  	--form-space-integral-xg-M: 8px;
  	--form-space-integral-yg-M1: 8px;
  	--popover-space-menu-yg-M: 8px;
  	--form-radius-input: 8px;
  	--form-space-input-y-M: 8px;
  	--button-space-tertiary-xg-M: 8px;
  	--button-space-tertiary-y-M: 8px;
  	--button-space-secondary-xg-M: 8px;
  	--button-space-secondary-y-M: 8px;
  	--form-space-input-yg-M: 12px;
  	--form-size-radio-dot-M: 12px;
  	--form-space-integral-progressive-y-M: 12px;
  	--form-space-input-x-M: 12px;
  	--button-space-layout-xg-M: 12px;
  	--container-space-generic-header-xg-M: 12.8px;
  	--global-fontSize-adaptive-step01: 14px;
  	--container-space-generic-header-xg-M1: 16px;
  	--button-radius-subtle-S: 16px;
  	--global-fontSize-adaptive-step0: 16px;
  	--button-space-layout-y-S: 16px;
  	--button-space-tertiary-x-M: 16px;
  	--global-fontSize-adaptive-step02: 16px;
  	--button-space-primary-x-M: 16px;
  	--global-fontSize-adaptive-step1: 19px;
  	--container-space-generic-header-x-M: 19.2px;
  	--container-space-generic-header-y-M: 19.2px;
  	--status-size-icon-M: 20px;
  	--form-size-icon-M: 20px;
  	--button-radius-tertiary-M: 20px;
  	--button-radius-secondary-M: 20px;
  	--container-radius-dialog: 24px;
  	--form-size-radio-circle-M: 24px;
  	--button-space-layout-x-M: 24px;
  	--global-fontSize-adaptive-step3: 25px;
  	--button-size-S: 32px;
  	--form-size-input-M: 40px;
  	--button-size-M: 40px;
  	--button-size-M1: 40px;
  	--container-size-footer-L: 72px;
  	--form-radius-radio: 999px;

}

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Dialog from 'carbon-react/lib/components/dialog';
import Button from 'carbon-react/lib/components/button';
import { RadioButton, RadioButtonGroup } from 'carbon-react/lib/components/radio-button';
import { Select, Option } from 'carbon-react/lib/components/select';
import Form from 'carbon-react/lib/components/form';
import Box from 'carbon-react/lib/components/box';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import VerticalDivider from 'carbon-react/lib/components/vertical-divider';
import Image from 'carbon-react/lib/components/image';
import Typography from 'carbon-react/lib/components/typography';

import translations from './i18n';

const App = ({ locale = 'en', topics }) => {
  const [isDialogOpen, setIsDialogOpen] = useState(true);
  const [selectedOption, setSelectedOption] = useState('topic');
  const [selectedTopic, setSelectedTopic] = useState('');
  const t = translations[locale] || translations.en;

  const handleCloseDialog = () => setIsDialogOpen(false);
  const handleOptionChange = (event) => setSelectedOption(event.target.value);
  const handleTopicChange = (event) => setSelectedTopic(event.target.value);

  const handleCancel = () => {
    setIsDialogOpen(false);
    alert('Cancel button clicked');
  };

  const handleCreate = () => {
    alert(`Create button clicked. Selected option: ${selectedOption}`);
  };

  return (
    <CarbonProvider validationRedesignOptIn>
      <Dialog
        open={ isDialogOpen }
        onCancel={ handleCloseDialog }
        highlightVariant="ai"
        aria-label={ t.aria.dialogLabel }
        height="550px"
        title={
          <Box pb="2">
            <Box
              display="flex"
              alignItems="top"
            >
              <Image
                alt=""
                decorative
                src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
                width="20px"
                height="20px"
                mt="3px"
                mr="8px"
              />
              <Box ml="2px">
                <Typography variant="h1">{ t.dialog.title }</Typography>
              </Box>
            </Box>
            <Box mb="8px">
              <Typography
                variant="h4"
                fontWeight="500"
                color="--colorsUtilityYin055"
              >
                { t.dialog.subtitle }
              </Typography>
            </Box>
          </Box>
        }
      >
        <Form
          leftSideButtons={
            <Button
              buttonType="tertiary"
              onClick={ handleCancel }
              aria-label={ t.aria.cancelButton }
            >
              { t.dialog.cancel }
            </Button>
          }
          saveButton={
            <Button
              buttonType="gradient-grey"
              onClick={ handleCreate }
              aria-label={ t.aria.createButton }
            >
              { t.dialog.create }
            </Button>
          }
          stickyFooter
        >
          <Box>
            <RadioButtonGroup
              mt="1"
              name="document-options"
              onChange={ handleOptionChange }
              value={ selectedOption }
              aria-label={ t.aria.optionsGroup }
              legend={ t.dialog.sectionHeader }
            >
              <RadioButton
                id="topic-option"
                value="topic"
                label={ t.dialog.radio.selectTopic }
                fieldHelp={
                  <Typography
                    variant="small"
                    color="--colorsUtilityYin055"
                    mb={ 1 }
                  >
                    { t.dialog.radio.selectTopicSubheader }
                  </Typography>
                }
              />

              {
                selectedOption === 'topic' && (
                <Box
                  display="flex"
                  alignItems="flex-start"
                  ml={ 1 }
                  mt={ 0 }
                >
                  <VerticalDivider
                    height="100px"
                    width="2px"
                    mr={ 2 }
                    ml={ 0 }
                    pl={ 0 }
                    mt="-45px"
                    tint={ 70 }
                  />
                  <Box flexGrow={ 1 } width="100%">
                    <Select
                      maxWidth="100%"
                      label={ t.dialog.selectTopic }
                      value={ selectedTopic }
                      onChange={ handleTopicChange }
                      aria-label={ t.aria.topicSelection }
                      required
                    >
                      { topics.map((topic) => (
                        <Option key={ topic.value } text={ topic.text } value={ topic.value } />
                      ))}
                    </Select>
                  </Box>
                </Box>
              )}

              <RadioButton
                id="template-option"
                value="template"
                label={ t.dialog.radio.customTemplate }
                fieldHelp={
                  <Typography variant="small" color="--colorsUtilityYin055">
                    { t.dialog.radio.customTemplateSubheader }
                  </Typography>
                }
              />
            </RadioButtonGroup>
          </Box>
        </Form>
      </Dialog>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  topics: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired
    })
  ).isRequired
};

export default App;

const translations = {
  en: {
    dialog: {
      title: 'Create document with Sage Copilot',
      subtitle: 'Draft a document by selecting a document topic or writing your own prompt.',
      sectionHeader: 'Select a method to draft your document',
      cancel: 'Cancel',
      create: 'Draft with Copilot',
      selectTopic: 'Select a document topic',
      radio: {
        customTemplate: 'Write your own prompt',
        customTemplateSubheader: 'Help copilot by describing this document in a few words.',
        selectTopic: 'Select from document topics',
        selectTopicSubheader: 'Choose from common HR document topics.'
      }
    },
    aria: {
      dialogLabel: 'Document creation dialog',
      cancelButton: 'Cancel document creation',
      createButton: 'Draft with Copilot',
      optionsGroup: 'Document creation options',
      topicSelection: 'Document topic selection'
    }
  }
};

export default translations;

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";
import App from "./app";

const topicsFromDatabase = [
  { value: "invoice", text: "Invoice" },
  { value: "contract", text: "Contract" },
  { value: "proposal", text: "Proposal" },
  { value: "report", text: "Financial Report" },
  { value: "letter", text: "Business Letter" }
];

const container = document.getElementById("app");
const root = createRoot(container);

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App topics={ topicsFromDatabase } />
  </CarbonProvider>
);


.aiBorder {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    height: calc(100% - 0.4px);
    top: 0px;
    right: 0px;
    bottom: 0.4px;
    left: 0px;
    border-radius: var(--container-radius-dialog) var(--container-radius-dialog) 0px 0px;
    border-top: var(--container-borderwidth-AIgradient) solid var(--color-forestgreen);
    box-sizing: border-box;
    z-index: 0;
}
.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.aiIcon {
    width: var(--status-size-icon-M);
    position: relative;
    height: var(--status-size-icon-M);
}
.iconneutral {
    align-self: stretch;
    width: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.createDocumentWith {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.headingWrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--container-space-generic-header-xg-M1);
}
.subheading {
    align-self: stretch;
    position: relative;
    font-size: var(--global-fontSize-adaptive-step1);
    line-height: 150%;
    font-weight: 500;
    color: var(--container-color-standard-text-alt);
}
.headingWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--container-space-generic-header-yg-M);
    z-index: 1;
}
.closeIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.closeButton {
    border-radius: var(--button-radius-subtle-S);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-subtle-y-S) var(--button-space-subtle-x-S);
    box-sizing: border-box;
    min-width: var(--button-size-S);
    min-height: var(--button-size-S);
    z-index: 2;
}
.border {
    position: absolute;
    width: calc(100% + 1px);
    top: calc(50% - 0px);
    right: -0.5px;
    left: -0.5px;
    border-top: 1px solid var(--container-color-standard-border-default);
    box-sizing: border-box;
    height: 1px;
}
.divider {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0.4px;
    left: 0px;
    height: 1px;
    z-index: 3;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: var(--container-radius-dialog) var(--container-radius-dialog) 0px 0px;
    background-color: var(--container-color-standard-bg-default);
    width: 760px;
    height: 109.4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--container-space-generic-header-y-M);
    box-sizing: border-box;
    gap: var(--container-space-generic-header-xg-M);
    font-family: var(--font-sage-text);
}
.label {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.circle {
    width: var(--form-size-radio-circle-M);
    border-radius: var(--form-radius-radio);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-radio-circle-M);
}
.keylineWrapper {
    width: 2px;
    flex: 1;
}
.circleWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}
.iconAndLabelWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.secondaryLabel {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    color: var(--form-color-labelset-label-alt);
}
.contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.option1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-xg-M);
}
.dot {
    width: var(--form-size-radio-dot-M);
    position: relative;
    border-radius: 50%;
    background-color: var(--form-color-typical-icon-active);
    height: var(--form-size-radio-dot-M);
}
.circle1 {
    width: var(--form-size-radio-circle-M);
    border-radius: var(--form-radius-radio);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-radio-circle-M);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-11xs);
}
.keyline1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    border-radius: var(--form-radius-progressivebar);
    background-color: var(--form-color-typical-border-alt);
}
.keyline {
    align-self: stretch;
    width: 2px;
    position: relative;
}
.keylineWrapper1 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 0px var(--form-space-integral-progressive-y-M);
}
.span {
    color: #cd384b;
}
.labelSet1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    color: var(--container-color-standard-text-default);
}
.actionOptional {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-11xs);
    gap: 4px;
    cursor: pointer;
}
.keyline2 {
    position: absolute;
    top: -1px;
    left: 9px;
    border-right: 2px solid var(--colors-utility-major-100);
    box-sizing: border-box;
    width: 2px;
    height: 199px;
}
.content {
    position: absolute;
    width: 95.48%;
    top: 4.06%;
    left: 2.26%;
    line-height: 150%;
    color: var(--colors-utility-yin-090);
    display: inline-block;
}
.buttonMajorSingle {
    position: absolute;
    top: calc(50% - 53.5px);
    left: calc(50% - 338px);
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-base);
    min-height: 32px;
}
.buttonMajorSingle1 {
    position: absolute;
    top: calc(50% - 5.5px);
    left: calc(50% - 338px);
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-base);
    min-height: 32px;
}
.buttonMajorSingle2 {
    position: absolute;
    top: calc(50% + 42.5px);
    left: calc(50% - 338px);
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-base);
    min-height: 32px;
}
.swappableContent {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 708px;
    height: 197px;
}
.contentWrapper2 {
    align-self: stretch;
    position: relative;
    height: 197px;
}
.inputTextContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--form-space-input-y-M) var(--form-space-input-x-M);
}
.inputContainer {
    align-self: stretch;
    border-radius: var(--form-radius-input);
    background-color: var(--form-color-typical-bg-enabled1);
    border: var(--form-borderwidth-input1) solid var(--form-color-typical-border-enabled1);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: var(--form-size-textarea-M);
    font-size: var(--global-fontSize-adaptive-step0);
    color: var(--form-color-typical-text-enabled);
}
.countWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--form-space-input-y-M) 0px 0px;
    font-size: var(--global-fontSize-adaptive-step0);
    color: var(--form-color-typical-text-alt);
}
.textArea {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.nestedComponent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--form-space-integral-progressive-y-M) 0px;
    color: var(--colors-action-major-500);
}
.radioButtonList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-input-yg-M);
    font-size: var(--font-size-sm);
}
.radioButtonVerticalGroup {
    width: 712px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-yg-M);
}
.verticalPaddingLayout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 760px;
    height: 430px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-5xl);
    box-sizing: border-box;
}
.modalContentWrapper {
    position: absolute;
    top: 109px;
    left: 0px;
    width: 760px;
    height: 592px;
    font-size: var(--global-fontSize-adaptive-step0);
    color: var(--form-color-labelset-label-default);
}
.ghostContainer {
    flex: 1;
    position: relative;
    height: 0px;
}
.paddingTop {
    width: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--button-space-layout-y-S) 0px 0px;
    box-sizing: border-box;
}
.ghostContainer1 {
    align-self: stretch;
    width: 0px;
    position: relative;
}
.paddingLeft {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px 0px var(--button-space-layout-x-M);
}
.button4 {
    border-radius: var(--button-radius-tertiary-M);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-tertiary-y-M) var(--button-space-tertiary-x-M);
    box-sizing: border-box;
    min-height: var(--button-size-M);
}
.button1 {
    border-radius: var(--button-radius-secondary-M);
    background: linear-gradient(90deg, rgba(19, 160, 56, 0.08), rgba(20, 145, 151, 0.08) 40%, rgba(168, 124, 251, 0.08) 90%);
    border: var(--button-borderwidth-secondary) solid var(--color-forestgreen);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-secondary-y-M) var(--button-space-primary-x-M);
    min-height: var(--button-size-M1);
    color: var(--button-color-ai-label-hover);
}
.buttonWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: center;
    gap: var(--button-space-layout-xg-M);
}
.paddingRight {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px var(--button-space-layout-x-M) 0px 0px;
}
.paddingWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.paddingBottom {
    width: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 0px var(--button-space-layout-y-S);
    box-sizing: border-box;
}
.buttonLayout {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}
.footer {
    position: absolute;
    top: 725px;
    left: 0px;
    background-color: var(--container-color-standard-bg-default);
    width: 760px;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: flex-end;
    max-height: var(--container-size-footer-L);
    font-size: var(--global-fontSize-adaptive-step01);
    color: var(--colors-action-major-500);
}
.dialogModal {
    width: 100%;
    position: relative;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1), 10px 10px 60px rgba(0, 0, 0, 0.1);
    border-radius: var(--container-radius-dialog);
    background-color: var(--container-color-standard-bg-default);
    height: 797px;
    overflow-y: auto;
    text-align: left;
    font-size: var(--global-fontSize-adaptive-step3);
    color: var(--container-color-standard-text-default);
    font-family: var(--font-sage-ui);
}

import { FunctionComponent, useCallback } from 'react';
import styles from './DialogModal.module.css';

const DialogModal:FunctionComponent = () => {

  	const onTriggerContainerClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

            						Create document with Sage Copilot

Draft a document by selecting a document topic or writing your own prompt.

Select a method to draft your document

Select from document topics

Choose from common HR document topics

Write your own prompt

Help Copilot by describing this document in a few words.

                          													{`Write your own prompt `}
                          													*

Get inspired

The following prompts are based on common HR documents as well as documents saved in your company.

Draft a job description

Draft a job offer letter

Draft a salary raise letter

200 characters left

Cancel

Draft with Copilot

);
};

export default DialogModal;

@import url('https://fonts.googleapis.com/css2?family=Sage+Text:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500&display=swap');
body {
  	margin: 0; line-height: normal;
}
:root {

  	/* Fonts */
  	--font-sage-ui: 'Sage UI';
  	--font-sage-text: 'Sage Text';

  	/* font sizes */
  	--font-size-sm: 14px;

  	/* Colors */
  	--color-forestgreen: #13a038;

  	/* Gaps */
  	--gap-5xs: 8px;

  	/* Paddings */
  	--padding-11xs: 2px;
  	--padding-base: 16px;
  	--padding-5xl: 24px;

  	/* Border radiuses */
  	--br-5xl: 24px;
  	--br-13xl: 32px;

  	/* Effects */
  	--container-boxshadow-dialog: 0px 3px 4px rgba(0, 0, 0, 0.1), 10px 10px 60px rgba(0, 0, 0, 0.1);

  	/* Figma Variables */

  	/* Color Variables */
  	--button-color-ai-label-hover: #000;
  	--colors-action-major-500: #007e45;
  	--colors-utility-major-100: #ccd6db;
  	--colors-utility-yin-090: rgba(0, 0, 0, 0.9);
  	--container-color-standard-bg-default: #fff;
  	--container-color-standard-border-default: #e8e8e8;
  	--container-color-standard-text-alt: rgba(0, 0, 0, 0.55);
  	--container-color-standard-text-default: rgba(0, 0, 0, 0.95);
  	--form-color-labelset-label-alt: rgba(0, 0, 0, 0.55);
  	--form-color-labelset-label-default: rgba(0, 0, 0, 0.95);
  	--form-color-typical-bg-enabled: #fff;
  	--form-color-typical-bg-enabled1: #fff;
  	--form-color-typical-border-alt: #a6a6a6;
  	--form-color-typical-border-enabled: #777;
  	--form-color-typical-border-enabled1: #777;
  	--form-color-typical-icon-active: #000;
  	--form-color-typical-text-alt: rgba(0, 0, 0, 0.55);
  	--form-color-typical-text-enabled: rgba(0, 0, 0, 0.95);
  	--modes-color-interactive-primary-legacy-default: #007e45;

  	/* Number Variables */
  	--form-borderwidth-input: 1px;
  	--form-borderwidth-input1: 1px;
  	--form-size-progressive-bar: 2px;
  	--form-radius-progressivebar: 2px;
  	--button-borderwidth-secondary: 2px;
  	--container-space-generic-header-yg-M: 4px;
  	--button-space-subtle-xg-S: 4px;
  	--button-space-subtle-y-S: 4px;
  	--container-borderwidth-AIgradient: 6px;
  	--button-space-subtle-x-S: 8px;
  	--form-space-integral-yg-M: 8px;
  	--form-space-integral-xg-M: 8px;
  	--form-radius-input: 8px;
  	--form-space-input-y-M: 8px;
  	--button-space-tertiary-xg-M: 8px;
  	--button-space-tertiary-y-M: 8px;
  	--button-space-secondary-xg-M: 8px;
  	--button-space-secondary-y-M: 8px;
  	--form-space-input-yg-M: 12px;
  	--form-space-integral-progressive-y-M: 12px;
  	--form-size-radio-dot-M: 12px;
  	--form-space-input-x-M: 12px;
  	--button-space-layout-xg-M: 12px;
  	--container-space-generic-header-xg-M: 12.8px;
  	--container-space-generic-header-xg-M1: 16px;
  	--button-radius-subtle-S: 16px;
  	--global-fontSize-adaptive-step0: 16px;
  	--button-space-layout-y-S: 16px;
  	--button-space-tertiary-x-M: 16px;
  	--global-fontSize-adaptive-step01: 16px;
  	--button-space-primary-x-M: 16px;
  	--global-fontSize-adaptive-step1: 19px;
  	--container-space-generic-header-x-M: 19.2px;
  	--container-space-generic-header-y-M: 19.2px;
  	--status-size-icon-M: 20px;
  	--button-radius-tertiary-M: 20px;
  	--button-radius-secondary-M: 20px;
  	--container-radius-dialog: 24px;
  	--form-size-radio-circle-M: 24px;
  	--button-space-layout-x-M: 24px;
  	--global-fontSize-adaptive-step3: 25px;
  	--button-size-S: 32px;
  	--button-size-M: 40px;
  	--button-size-M1: 40px;
  	--container-size-footer-L: 72px;
  	--form-size-textarea-M: 80px;
  	--form-radius-radio: 999px;
}

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Dialog from 'carbon-react/lib/components/dialog';
import Button from 'carbon-react/lib/components/button';
import { RadioButton, RadioButtonGroup } from 'carbon-react/lib/components/radio-button';
import { Select, Option } from 'carbon-react/lib/components/select';
import Form from 'carbon-react/lib/components/form';
import Box from 'carbon-react/lib/components/box';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import VerticalDivider from 'carbon-react/lib/components/vertical-divider';
import Image from 'carbon-react/lib/components/image';
import Typography from 'carbon-react/lib/components/typography';
import Textarea from 'carbon-react/lib/components/textarea';
import { Accordion } from 'carbon-react/lib/components/accordion';
import I18nProvider from 'carbon-react/lib/components/i18n-provider';
import I18n from 'i18n-js';
import { t } from './i18n';

const App = ({ locale = 'en', topics }) => {
  I18n.locale = locale;

  const [isDialogOpen, setIsDialogOpen] = useState(true);
  const [selectedOption, setSelectedOption] = useState('topic');
  const [selectedTopic, setSelectedTopic] = useState('');
  const [promptText, setPromptText] = useState('');
  const CHAR_LIMIT = 200;

  const carbonI18n = {
    locale: () => locale,
    characterCount: {
      charactersLeft: (count) => {
        return t('dialog.prompt.charactersLeft', { count });
      }
    }
  };

  const handleCloseDialog = () => setIsDialogOpen(false);
  const handleOptionChange = (event) => setSelectedOption(event.target.value);
  const handleTopicChange = (event) => setSelectedTopic(event.target.value);

  const handlePromptChange = (event) => {
    const newValue = event.target.value;
    if (newValue.length <= CHAR_LIMIT || newValue.length < promptText.length) {
      setPromptText(newValue);
    }
  };

  const handleCancel = () => {
    setIsDialogOpen(false);
    alert('Cancel button clicked');
  };

  const handleCreate = () => {
    if (selectedOption === 'topic') {
      alert(`Create button clicked. Selected option: ${selectedOption}, Topic: ${selectedTopic}`);
    } else {
      alert(`Create button clicked. Selected option: ${selectedOption}, Prompt: ${promptText}`);
    }
    setIsDialogOpen(false);
  };

  const handleExampleClick = (example) => {
    setPromptText(t(`dialog.prompt.examples.${example}`));
    alert(`Example prompt selected: ${t(`dialog.prompt.examples.${example}`)}`);
  };

  return (
    <CarbonProvider validationRedesignOptIn>
      <I18nProvider locale={ carbonI18n }>
        <Dialog
          open={ isDialogOpen }
          onCancel={ handleCloseDialog }
          highlightVariant="ai"
          aria-label={ t('aria.dialogLabel') }
          height="805px"
          title={
            <Box
              pb="1"
            >
              <Box
                display="flex"
                alignItems="top"
                mb="8px"
              >
                <Image
                  alt=""
                  decorative
                  src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
                  width="20px"
                  height="20px"
                  mt="3px"
                  mr="8px"
                />
                <Box ml="2px">
                  <Typography variant="h1">{ t('dialog.title') }</Typography>
                </Box>
              </Box>
              <Box mb="8px">
                <Typography
                  variant="h4"
                  fontWeight="500"
                  color="--colorsUtilityYin055"
                >
                  { t('dialog.subtitle') }
                </Typography>
              </Box>
            </Box>
          }
        >
          <Form
            leftSideButtons={
              <Button
                buttonType="tertiary"
                onClick={ handleCancel }
                aria-label={ t('aria.cancelButton') }
              >
                { t('dialog.cancel') }
              </Button>
            }
            saveButton={
              <Button
                buttonType="gradient-grey"
                onClick={ handleCreate }
                aria-label={ t('aria.createButton') }
              >
                { t('dialog.create') }
              </Button>
            }
            stickyFooter
          >
            <Box p={ 0 }>
              <RadioButtonGroup
                mt="1"
                name="document-options"
                onChange={ handleOptionChange }
                value={ selectedOption }
                aria-label={ t('aria.optionsGroup') }
                legend={ t('dialog.sectionHeader') }
              >
                <RadioButton
                  id="topic-option"
                  value="topic"
                  label={ t('dialog.radio.selectTopic') }
                  fieldHelp={
                    <Typography
                      variant="small"
                      color="--colorsUtilityYin055"
                      mb={ 1 }
                    >
                      { t('dialog.radio.selectTopicSubheader') }
                    </Typography>
                  }
                />

                {
                  selectedOption === 'topic' && (
                  <Box
                    display="flex"
                    alignItems="flex-start"
                    ml={ 1 }
                    mt={ 0 }
                  >
                    <VerticalDivider
                      height="100px"
                      width="2px"
                      mr={ 2 }
                      ml={ 0 }
                      pl={ 0 }
                      mt="-45px"
                      tint={ 70 }
                    />
                    <Box flexGrow={ 1 } width="100%">
                      <Select
                        maxWidth="100%"
                        label={ t('dialog.selectTopic') }
                        value={ selectedTopic }
                        onChange={ handleTopicChange }
                        aria-label={ t('aria.topicSelection') }
                        required
                      >
                        { topics.map((topic) => (
                          <Option key={ topic.value } text={ topic.text } value={ topic.value } />
                        ))}
                      </Select>
                    </Box>
                  </Box>
                )}

                <RadioButton
                  id="template-option"
                  value="template"
                  label={ t('dialog.radio.customTemplate') }
                  fieldHelp={
                    <Typography variant="small" color="--colorsUtilityYin055">
                      { t('dialog.radio.customTemplateSubheader') }
                    </Typography>
                  }
                />

                {
                  selectedOption === 'template' && (
                    <Box
                      display="flex"
                      alignItems="stretch"
                      ml={ 1 }
                      mt={ 0 }
                      position="relative"
                    >
                      <Box
                        position="absolute"
                        left={ 0 }
                        top="-45px"
                        bottom="24px"
                        width="2px"
                        mr={ 2 }
                      >
                        <VerticalDivider
                          height="100%"
                          mr={ 2 }
                          ml={ 0 }
                          pl={ 0 }
                          mt="0"
                          tint={ 70 }
                        />
                      </Box>
                      <Box flexGrow={ 1 } width="100%" ml= { 3 }>
                        <Box mb={ 0 }>
                          <Accordion
                            title={ t('dialog.prompt.getInspired') }
                            aria-label={ t('aria.expandInspiration') }
                            variant="subtle"
                            p={ 0 }
                          >
                            <Box ml={ 1 } mt={ 0 } mb={ 0 }>
                              <Typography variant="small" color="--colorsUtilityYin090">
                                { t('dialog.prompt.inspirationText') }
                              </Typography>

                              <Box display="flex" flexDirection="column" alignItems="flex-start" gap={ 1 } mt={ 2 }>
                                <Button
                                  buttonType="secondary"
                                  onClick={ () => handleExampleClick('jobDescription') }
                                  aria-label={ `${t('aria.examplePrompt')}: ${t('dialog.prompt.examples.jobDescription')}` }
                                  size="small"
                                  m={ 0 }
                                  pt={ 1 }
                                  pb={ 1 }
                                  pl={ 2 }
                                  pr={ 2 }
                                >
                                  { t('dialog.prompt.examples.jobDescription') }
                                </Button>

                                <Button
                                  buttonType="secondary"
                                  onClick={ () => handleExampleClick('offerLetter') }
                                  aria-label={ `${t('aria.examplePrompt')}: ${t('dialog.prompt.examples.offerLetter')}` }
                                  size="small"
                                  mt={ 1 }
                                  pt={ 1 }
                                  pb={ 1 }
                                  pl={ 2 }
                                  pr={ 2 }
                                >
                                  { t('dialog.prompt.examples.offerLetter') }
                                </Button>

                                <Button
                                  buttonType="secondary"
                                  onClick={ () => handleExampleClick('salaryRaise') }
                                  aria-label={ `${t('aria.examplePrompt')}: ${t('dialog.prompt.examples.salaryRaise')}` }
                                  size="small"
                                  mt={ 1 }
                                  pt={ 1 }
                                  pb={ 1 }
                                  pl={ 2 }
                                  pr={ 2 }
                                >
                                  { t('dialog.prompt.examples.salaryRaise') }
                                </Button>
                              </Box>
                            </Box>
                          </Accordion>
                        </Box>

                        <Box>
                          <Textarea
                            label={ t('dialog.prompt.label') }
                            value={ promptText }
                            onChange={ handlePromptChange }
                            aria-label={ t('aria.promptTextarea') }
                            required
                            rows={ 4 }
                            mb={ 0 }
                            mt={ 2 }
                            characterLimit={ CHAR_LIMIT }
                          />
                        </Box>
                      </Box>
                    </Box>
                  )
                }
              </RadioButtonGroup>
            </Box>
          </Form>
        </Dialog>
      </I18nProvider>
    </CarbonProvider>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  topics: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired
    })
  ).isRequired
};

export default App;

import I18n from 'i18n-js';

// Define translations
const translations = {
  en: {
    dialog: {
      title: 'Create document with Sage Copilot',
      subtitle: 'Draft a document by selecting a document topic or writing your own prompt.',
      sectionHeader: 'Select a method to draft your document',
      cancel: 'Cancel',
      create: 'Draft with Copilot',
      selectTopic: 'Select a document topic',
      radio: {
        customTemplate: 'Write your own prompt',
        customTemplateSubheader: 'Help copilot by describing this document in a few words.',
        selectTopic: 'Select from document topics',
        selectTopicSubheader: 'Choose from common HR document topics.'
      },
      prompt: {
        label: 'Write your own prompt',
        charactersLeft: '%{count} characters left',
        approaching: 'Approaching character limit',
        getInspired: 'Get inspired',
        examples: {
          jobDescription: 'Draft a job description',
          offerLetter: 'Draft a job offer letter',
          salaryRaise: 'Draft a salary raise letter'
        },
        inspirationText: 'The following prompts are based on common HR documents as well as documents saved in your company.'
      }
    },
    aria: {
      dialogLabel: 'Document creation dialog',
      cancelButton: 'Cancel document creation',
      createButton: 'Draft with Copilot',
      optionsGroup: 'Document creation options',
      topicSelection: 'Document topic selection',
      promptTextarea: 'Document prompt input',
      examplePrompt: 'Use example prompt',
      expandInspiration: 'Toggle inspiration examples'
    }
  }
};

// Configure i18n-js
I18n.translations = translations;
I18n.defaultLocale = 'en';

// Create a translation helper function
export const t = (key, options = {}) => I18n.t(key, options);

// Export the translations object for compatibility with existing code
export default translations;


.aiBorder {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: var(--br-base) var(--br-base) 0px 0px;
    border-top: 6px solid var(--container-color-standard-AI-borderhorizontal);
    box-sizing: border-box;
    z-index: 0;
}
.icon1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.poweredByAiIcon {
    width: 20px;
    position: relative;
    height: 20px;
}
.icon {
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.createDocumentWith {
    flex: 1;
    position: relative;
    line-height: 125%;
}
.headingWrapper1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
}
.subheading {
    align-self: stretch;
    position: relative;
    font-size: 19px;
    line-height: 150%;
    font-weight: 500;
    font-family: var(--font-sage-text);
    color: var(--container-color-standard-text-alt);
}
.headingWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    z-index: 1;
}
.closeButton {
    border-radius: var(--br-5xs);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px var(--padding-11xs);
    box-sizing: border-box;
    min-width: 32px;
    min-height: 32px;
    z-index: 2;
}
.border {
    position: absolute;
    width: calc(100% + 1px);
    top: calc(50% - 0px);
    right: -0.5px;
    left: -0.5px;
    border-top: 1px solid var(--container-color-standard-border-default);
    box-sizing: border-box;
    height: 1px;
}
.divider {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 1px;
    z-index: 3;
}
.header {
    align-self: stretch;
    border-radius: var(--br-base) var(--br-base) 0px 0px;
    background-color: var(--container-color-standard-bg-default);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-5xl);
    position: relative;
    gap: var(--gap-base);
    font-size: 24px;
}
.label {
    align-self: stretch;
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.labelSet {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
.circle {
    width: var(--form-size-radio-circle-M);
    border-radius: var(--form-radius-radio);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-radio-circle-M);
}
.keylineWrapper {
    width: 2px;
    flex: 1;
}
.circleWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}
.label1 {
    flex: 1;
    position: relative;
    line-height: 150%;
    cursor: pointer;
}
.iconAndLabelWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.option1 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-xg-M);
}
.dot {
    width: var(--form-size-radio-dot-M);
    position: relative;
    border-radius: 50%;
    background-color: var(--form-color-typical-icon-active);
    height: var(--form-size-radio-dot-M);
}
.circle1 {
    width: var(--form-size-radio-circle-M);
    border-radius: var(--form-radius-radio);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-radio-circle-M);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-11xs);
}
.label2 {
    flex: 1;
    position: relative;
    line-height: 150%;
}
.radioButtonList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-input-yg-M);
}
.radioButtonVerticalGroup {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 752px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-yg-M);
}
.indicatorIcon {
    width: 20px;
    position: relative;
    height: 20px;
    z-index: 1;
}
.placeholder {
    position: relative;
    line-height: 150%;
}
.inputText {
    align-self: stretch;
    width: 224px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    z-index: 0;
}
.searchWithoutButton {
    align-self: stretch;
    border-bottom: 2px solid var(--colors-action-minor-500);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 12px;
    gap: 12px;
}
.searchWithoutButtonWrapper {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.majorButton {
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-base);
    gap: var(--gap-5xs);
    min-height: 32px;
}
.examplebadgeOnFilterButton {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}
.examplebadgeOnFilterButtonWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: var(--colors-action-major-500);
}
.frameContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    gap: var(--gap-5xl);
}
.frameWrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}
.save {
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-base);
    min-height: 32px;
}
.save2 {
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-utility-major-transparent);
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px var(--padding-base);
}
.save1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.saveParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}
.frameWrapper1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.checkbox {
    width: 20px;
    border-radius: var(--br-9xs);
    background-color: var(--container-color-standard-bg-default);
    border: 1px solid var(--colors-utility-major-300);
    box-sizing: border-box;
    height: 20px;
}
.mandatoryLabel {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.checkboxSingle {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
    color: var(--colors-utility-yin-090);
}
.frameDiv {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    gap: 26px 0px;
    color: var(--colors-action-major-500);
}
.frameGroup {
    flex: 1;
    background-color: var(--container-color-standard-bg-default);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 26px;
}
.header1 {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--container-color-standard-bg-default);
    width: 620px;
    height: 98px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
}
.image1Icon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 32px;
    object-fit: cover;
}
.container {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: var(--br-81xl);
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    width: 32px;
    height: 32px;
}
.assetsportrait {
    width: 32px;
    position: relative;
    border-radius: var(--br-31xl);
    height: 32px;
    overflow: hidden;
    flex-shrink: 0;
}
.title {
    position: relative;
    line-height: 125%;
    font-weight: 500;
}
.details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkboxSingleParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
    text-align: left;
}
.container3 {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: var(--br-81xl);
    background-color: var(--colors-utility-readOnly-400);
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    width: 32px;
    height: 32px;
}
.initials {
    position: absolute;
    top: 6px;
    left: 8px;
    line-height: 150%;
    text-transform: uppercase;
    font-weight: 500;
}
.details3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
.initials1 {
    position: absolute;
    top: 6px;
    left: 7px;
    line-height: 150%;
    text-transform: uppercase;
    font-weight: 500;
}
.initials2 {
    position: absolute;
    top: 6px;
    left: 6px;
    line-height: 150%;
    text-transform: uppercase;
    font-weight: 500;
}
.frameParent2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xl);
    max-width: 260px;
}
.checkbox9 {
    width: 20px;
    border-radius: var(--br-9xs);
    background-color: var(--container-color-standard-bg-default);
    border: 1px solid var(--colors-utility-major-300);
    box-sizing: border-box;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.checkboxSingleParent14 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
    text-align: center;
}
.frameParent4 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xl);
    max-width: 260px;
    text-align: left;
}
.frameParent1 {
    width: 620px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.page2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}
.employees1 {
    position: absolute;
    top: 122px;
    left: 0px;
    width: 620px;
    height: 368px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    padding: 0px var(--padding-base);
    box-sizing: border-box;
    text-align: center;
    color: var(--colors-utility-yin-090);
}
.employees {
    position: absolute;
    top: 32px;
    left: 66px;
    width: 620px;
    height: 490px;
    overflow: hidden;
}
.body1 {
    align-self: stretch;
    position: relative;
    background-color: var(--container-color-standard-bg-default);
    height: 554px;
}
.pagination {
    width: 700px;
    border-radius: 0px 0px var(--br-5xs) var(--br-5xs);
    background-color: #fafbfb;
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    height: 40px;
    display: none;
}
.body {
    position: absolute;
    top: 131px;
    left: 24px;
    border-radius: var(--br-5xs);
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    width: 752px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--container-color-standard-text-alt);
}
.radioButtonVerticalGroupParent {
    width: 800px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--container-color-standard-bg-default);
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    height: 709px;
}
.checkbox22 {
    width: var(--form-size-checkbox-M);
    border-radius: var(--form-radius-checkbox);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    height: var(--form-size-checkbox-M);
}
.checkboxWrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.option11 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}
.checkboxList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-input-yg-M1);
}
.checkboxVerticalGroup {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 288px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-yg-M1);
}
.checkboxVerticalGroupWrapper {
    width: 800px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--container-color-standard-bg-default);
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    height: 137px;
    font-size: var(--global-fontSize-adaptive-step0);
}
.hintText {
    align-self: stretch;
    position: relative;
    font-size: var(--global-fontSize-adaptive-step01);
    line-height: 150%;
    color: var(--form-color-labelset-label-alt);
}
.inputTextContainer {
    flex: 1;
    height: 40px;
    overflow: hidden;
}
.inputContainer {
    align-self: stretch;
    border-radius: var(--form-radius-input);
    background-color: var(--form-color-typical-bg-enabled);
    border: var(--form-borderwidth-input1) solid var(--form-color-typical-border-enabled);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: var(--form-size-textarea-M);
}
.wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.textArea {
    position: absolute;
    width: calc(100% - 48px);
    top: 24px;
    right: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--form-space-integral-yg-M);
}
.textAreaWrapper {
    width: 800px;
    position: relative;
    border-radius: var(--br-5xs);
    background-color: var(--container-color-standard-bg-default);
    border: 1px solid var(--colors-utility-readOnly-600);
    box-sizing: border-box;
    height: 184px;
}
.frameParent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xl);
}
.content {
    align-self: stretch;
    flex: 0.9645;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px var(--padding-21xl) var(--padding-21xl);
}
.scrollbarOnLight {
    width: 12px;
    flex: 1;
    background-color: var(--colors-utility-major-transparent);
    display: none;
}
.swappableContent {
    align-self: stretch;
    background-color: var(--colors-utility-readOnly-400);
    height: 1129px;
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 56px 0px;
    box-sizing: border-box;
    color: var(--form-color-labelset-label-default);
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: var(--container-color-standard-bg-default);
}
.shadow {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: var(--container-color-standard-bg-default);
    height: 72px;
    z-index: 0;
}
.buttonTypical {
    border-radius: var(--button-radius-subtle-M);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--button-space-subtle-y-M);
    box-sizing: border-box;
    min-height: var(--button-size-M);
    z-index: 1;
}
.insightButton {
    width: 212px;
    height: 40px;
    display: none;
    z-index: 2;
}
.majorButton1 {
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-5xl);
    min-height: 40px;
    z-index: 3;
}
.majorButton2 {
    width: 92px;
    border-radius: var(--br-13xl);
    border: 2px solid var(--colors-action-major-500);
    box-sizing: border-box;
    height: 40px;
    display: none;
    min-height: 40px;
    z-index: 4;
}
.majorButton3 {
    border-radius: var(--br-13xl);
    background-color: var(--colors-action-major-500);
    border: 2px solid var(--colors-utility-major-transparent);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px var(--padding-5xl);
    min-height: 40px;
    z-index: 5;
    color: var(--container-color-standard-bg-default);
}
.footer {
    width: 1536px;
    border-radius: 0px 0px var(--br-base) var(--br-base);
    background-color: var(--container-color-standard-bg-default);
    border-top: 1px solid #dde3e6;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--padding-base) var(--padding-5xl);
    position: relative;
    gap: var(--gap-base);
    color: var(--colors-action-major-500);
}
.copilotDialog {
    width: 100%;
    position: relative;
    border-radius: var(--br-base);
    height: 1312px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 320px;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--colors-utility-yin-090);
    font-family: var(--font-sage-ui);
}

import { FunctionComponent, useCallback } from 'react';
import styles from './CopilotDialog.module.css';

const CopilotDialog:FunctionComponent = () => {

  	const onLabelTextClick = useCallback(() => {
    		// Add your code here
  	}, []);

  	return (

            						Create document with Sage Copilot

Draft a document by selecting a document topic or writing your own prompt.

Share document with:

Everyone

Specific employees

Search...

Filter

Select all (200)

Clear selection

Hide unselected

Adam Brown

Dylan Evans

Grace Harris

jk

Jacob King

kk

Kimberly Knight

lm

Lucas Moore

np

Nicole Parker

SD

Bella Clark

Emily Fisher

SD

Harry irving

Kelsey King

lm

Liam Mitchell

lm

Liam Mitchell

lm

Liam Mitchell

Caleb Davis

Finn Gibson

SD

Isla Johnson

Kate Lawson

Kate Lawson

Kate Lawson

Kate Lawson

Give access to:

Direct manager

Team manager

Document settings

Require employee to accept document

Send email notification

Description

Hint text

Cancel

Back

Save

);
};

export default CopilotDialog;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sage+Text:wght@500&display=swap');
body {
  	margin: 0; line-height: normal;
}
:root {

  	/* Fonts */
  	--font-sage-ui: 'Sage UI';
  	--font-sage-text: 'Sage Text';

  	/* font sizes */
  	--font-size-sm: 14px;

  	/* Gaps */
  	--gap-5xs: 8px;
  	--gap-base: 16px;
  	--gap-5xl: 24px;

  	/* Paddings */
  	--padding-11xs: 2px;
  	--padding-base: 16px;
  	--padding-5xl: 24px;
  	--padding-21xl: 40px;

  	/* Border radiuses */
  	--br-9xs: 4px;
  	--br-5xs: 8px;
  	--br-base: 16px;
  	--br-13xl: 32px;
  	--br-31xl: 50px;
  	--br-81xl: 100px;

  	/* Figma Variables */

  	/* Color Variables */
  	--colors-action-major-500: #007e45;
  	--colors-action-minor-500: #335b70;
  	--colors-utility-major-300: #668494;
  	--colors-utility-major-transparent: rgba(0, 0, 0, 0);
  	--colors-utility-readOnly-400: #f2f5f6;
  	--colors-utility-readOnly-600: #ccd6db;
  	--colors-utility-yin-090: rgba(0, 0, 0, 0.9);
  	--container-color-standard-AI-borderhorizontal: #13a038;
  	--container-color-standard-bg-default: #fff;
  	--container-color-standard-border-default: #d1d1d1;
  	--container-color-standard-text-alt: rgba(0, 0, 0, 0.55);
  	--form-color-labelset-label-alt: rgba(0, 0, 0, 0.55);
  	--form-color-labelset-label-default: rgba(0, 0, 0, 0.95);
  	--form-color-typical-bg-enabled: #fff;
  	--form-color-typical-border-enabled: #777;
  	--form-color-typical-icon-active: #000;

  	/* Number Variables */
  	--form-borderwidth-input: 1px;
  	--form-borderwidth-input1: 1px;
  	--form-radius-checkbox: 4px;
  	--button-space-subtle-xg-M: 4px;
  	--form-space-integral-yg-M: 8px;
  	--form-space-integral-xg-M: 8px;
  	--form-space-integral-yg-M1: 8px;
  	--form-radius-input: 8px;
  	--form-space-input-y-M: 8px;
  	--button-space-subtle-x-M: 8px;
  	--button-space-subtle-y-M: 8px;
  	--form-space-input-yg-M: 12px;
  	--form-space-integral-progressive-y-M: 12px;
  	--form-size-radio-dot-M: 12px;
  	--form-space-input-yg-M1: 12px;
  	--form-space-integral-progressive-yg-M: 12px;
  	--form-space-input-x-M: 12px;
  	--global-fontSize-adaptive-step0: 14px;
  	--global-fontSize-adaptive-step01: 16px;
  	--button-radius-subtle-M: 20px;
  	--form-size-radio-circle-M: 24px;
  	--form-size-checkbox-M: 24px;
  	--button-size-M: 40px;
  	--form-size-textarea-M: 80px;
  	--form-radius-radio: 999px;
 }

import React, { useState, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import Form from 'carbon-react/lib/components/form';
import Pod from 'carbon-react/lib/components/pod';
import Button from 'carbon-react/lib/components/button';
import Box from 'carbon-react/lib/components/box';
import { Checkbox, CheckboxGroup } from 'carbon-react/lib/components/checkbox';
import { RadioButton, RadioButtonGroup } from 'carbon-react/lib/components/radio-button';
import Dialog from "carbon-react/lib/components/dialog";
import Image from 'carbon-react/lib/components/image';
import Typography from 'carbon-react/lib/components/typography';
import Search from 'carbon-react/lib/components/search';
import Portrait from 'carbon-react/lib/components/portrait';
import { GridContainer, GridItem } from "carbon-react/lib/components/grid";
import Textarea from 'carbon-react/lib/components/textarea';
import I18n from 'i18n-js';
import './i18n';
import translations from './i18n';

const App = ({
  locale = 'en',
  initialRequireAccept = false,
  initialSendEmail = false,
  initialDirectManager = false,
  initialTeamManager = false,
  initialShareWith = 'everyone',
  open = true,
  onClose,
  employees = []
}) => {
  I18n.translations = translations;
  I18n.locale = locale;

  const [requireAccept, setRequireAccept] = useState(initialRequireAccept);
  const [sendEmail, setSendEmail] = useState(initialSendEmail);
  const [directManager, setDirectManager] = useState(initialDirectManager);
  const [teamManager, setTeamManager] = useState(initialTeamManager);
  const [shareWith, setShareWith] = useState(initialShareWith);
  const [isOpen, setIsOpen] = useState(open);

  const [searchTerm, setSearchTerm] = useState('');
  const [hideUnselected, setHideUnselected] = useState(false);
  const [selectedEmployees, setSelectedEmployees] = useState([]);
  const [filteredEmployees, setFilteredEmployees] = useState(employees);

  const reorderForColumns = (array, columns) => {
    const rows = Math.ceil(array.length / columns);
    const reordered = [];

    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < columns; col++) {
        const index = col * rows + row;
        if (index < array.length) {
          reordered.push(array[index]);
        }
      }
    }

    return reordered;
  };

  const handleClose = useCallback(() => {
    setIsOpen(false);
    if (onClose) onClose();
  }, [onClose]);

  const handleBackClick = useCallback(() => {
    alert('Back button clicked');
  }, []);

  const handleSaveClick = useCallback(() => {
    alert('Save button clicked');
  }, []);

  const handleFilterClick = useCallback(() => {
    alert('Filter button clicked');
  }, []);

  const handleRadioChange = (event) => {
    setShareWith(event.target.value);
  };

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
    filterEmployees(event.target.value);
  };

  const filterEmployees = useCallback((term) => {
    if (!term) {
      setFilteredEmployees(employees);
    } else {
      setFilteredEmployees(
        employees.filter(employee =>
          employee.name.toLowerCase().includes(term.toLowerCase())
        )
      );
    }
  }, [employees]);

  const handleSelectAll = useCallback(() => {
    setSelectedEmployees(filteredEmployees.map(employee => employee.id));
  }, [filteredEmployees]);

  const handleClearSelection = useCallback(() => {
    setSelectedEmployees([]);
  }, []);

  const toggleEmployeeSelection = useCallback((id) => {
    setSelectedEmployees(prev =>
      prev.includes(id)
        ? prev.filter(empId => empId !== id)
        : [...prev, id]
    );
  }, []);

  const displayedEmployees = useMemo(() => {
    if (hideUnselected) {
      return filteredEmployees.filter(employee =>
        selectedEmployees.includes(employee.id)
      );
    }
    return filteredEmployees;
  }, [filteredEmployees, selectedEmployees, hideUnselected]);

  return (
    <Dialog
      open={ isOpen }
      onCancel={ handleClose }
      showCloseIcon
      size="extra-large"
      highlightVariant="ai"
      height="820px"

      title={
        <Box mb={ 2 }>
          <Box display="flex" alignItems="top">
            <Image
              alt=""
              decorative
              src="https://assets.sbc.sage.com/sbc.core.static.ui/1.32.0/static/product-icons/sbc_ai_star.svg"
              width="20px"
              height="20px"
              mt="2px"
              mr="8px"
            />
            <Box>
              <Typography variant="h1">{ I18n.t('header.title') }</Typography>
            </Box>
          </Box>
          <Box>
            <Typography variant="h3" color="--colorsUtilityYin055">{ I18n.t('header.subtitle') }</Typography>
          </Box>
        </Box>
      }
      aria-label={ I18n.t('header.title') }
    >
      <Box height="100%" display="flex" flexDirection="column" overflow="hidden">
        <Form
          leftSideButtons={[
            <Button
              key="cancel"
              buttonType="tertiary"
              onClick={ handleClose }
              data-role="cancel-button"
            >
              { I18n.t('buttons.cancel') }
            </Button>,
            <Button
              key="back"
              buttonType="secondary"
              onClick={ handleBackClick }
              data-role="back-button"
              borderColor="#007e45"
              iconColor="#007e45"
            >
              { I18n.t('buttons.back') }
            </Button>
          ]}
          saveButton={
            <Button
              buttonType="primary"
              onClick={ handleSaveClick }
              data-role="save-button"
            >
              { I18n.t('buttons.save') }
            </Button>
          }
          stickyFooter
          p={ 0 }
        >
          <Box
            p={ 3 }
            display="flex"
            flexDirection="column"
            alignItems="center"
          >
            <Box width="70%" p={0}>
              <Pod
                mb={ 3 }
              >
                <RadioButtonGroup
                  name="share-with-group"
                  value={ shareWith }
                  onChange={ handleRadioChange }
                  legend={I18n.t('sections.shareSettings')}
                >
                  <RadioButton
                    id="radio-everyone"
                    value="everyone"
                    label={ I18n.t('radioLabels.everyone') }
                    aria-label={ I18n.t('radioLabels.everyone') }
                  />
                  <RadioButton
                    id="radio-specific"
                    value="specific"
                    label={ I18n.t('radioLabels.specificEmployees') }
                    aria-label={ I18n.t('radioLabels.specificEmployees') }
                  />
                </RadioButtonGroup>

                {
                  shareWith === 'specific' && (
                  <Pod>
                    <Box pl={ 4 } pr={ 4 } display="flex" flexDirection="column" pt={ 1 }>
                      {/* Search and Filter Controls */}
                      <Box display="flex" alignItems="center" p={1} m={ 0 }>
                        <Box width="50%" m={ 0 }>
                          <Search
                            placeholder={ I18n.t('placeholders.search') }
                            value={ searchTerm }
                            onChange={ handleSearch }
                            aria-label={ I18n.t('ariaLabels.searchEmployees') }
                            m={ 0 }
                          />
                        </Box>
                        <Button
                          buttonType="secondary"
                          iconType="filter_new"
                          iconPosition="after"
                          aria-label={ I18n.t('ariaLabels.filterEmployees') }
                          size="small"
                          onClick={ handleFilterClick }
                          ml={3}
                        >
                          { I18n.t('buttons.filter') }
                        </Button>
                      </Box>

                      {/* Selection Controls */}
                      <Box display="flex" justifyContent="space-between" alignItems="center" mt={ 3 }>
                        <Box display="flex" p={ 0 } mt="-20px">
                          <Button
                            buttonType="secondary"
                            onClick={ handleSelectAll }
                            aria-label={ I18n.t('ariaLabels.selectAllEmployees') }
                            size="small"
                          >
                            { I18n.t('buttons.selectAll', { count: filteredEmployees.length }) }
                          </Button>
                          <Button
                            buttonType="tertiary"
                            onClick={ handleClearSelection }
                            aria-label={ I18n.t('ariaLabels.clearEmployeeSelection') }
                            size="small"
                            ml={ 2 }
                          >
                            { I18n.t('buttons.clearSelection') }
                          </Button>
                        </Box>
                        <Box>
                          <Checkbox
                            label={ I18n.t('checkboxLabels.hideUnselected') }
                            checked={ hideUnselected }
                            onChange={ () => setHideUnselected(!hideUnselected) }
                            aria-label={ I18n.t('ariaLabels.hideUnselectedEmployees') }
                          />
                        </Box>
                      </Box>

                      {/* Employee List */}
                      <Box maxHeight="295px" overflow="auto">
                        <GridContainer
                          gridGap="0px"
                          pl={ 1 }
                          pt="5px"
                          pb={ 0 }
                          pr={ 0 }
                        >
                          {
                            reorderForColumns(displayedEmployees, 3).map(employee => (
                            <GridItem key={employee.id} gridColumn="span 4">
                              <Box display="flex" alignItems="center" py="0px">
                                <Checkbox
                                  checked={selectedEmployees.includes(employee.id)}
                                  onChange={() => toggleEmployeeSelection(employee.id)}
                                  aria-label={I18n.t('ariaLabels.selectEmployee', { name: employee.name })}
                                  mr={ 1 }
                                />
                                <Portrait
                                  src={employee.image}
                                  initials={employee.initials}
                                  size="XS"
                                  alt={employee.name}
                                  mt="-18px"
                                  mr={ 1 }
                                />
                                <Typography mt="-4px">{employee.name}</Typography>
                              </Box>
                            </GridItem>
                          ))}
                        </GridContainer>
                      </Box>
                    </Box>
                  </Pod>
                )}
              </Pod>

              <Pod
                mb={ 3 }
              >
                <CheckboxGroup legend={ I18n.t('sections.accessSettings') }>
                  <Checkbox
                    id="direct-manager-checkbox"
                    label={ I18n.t('checkboxLabels.directManager') }
                    name="direct-manager"
                    checked={ directManager }
                    onChange={ (e) => setDirectManager(e.target.checked) }
                  />
                  <Checkbox
                    id="team-manager-checkbox"
                    label={ I18n.t('checkboxLabels.teamManager') }
                    name="team-manager"
                    checked={ teamManager }
                    onChange={ (e) => setTeamManager(e.target.checked) }
                  />
                </CheckboxGroup>
              </Pod>

              <Pod
                mb="3"
              >
                <CheckboxGroup legend={ I18n.t('sections.documentSettings') }>
                  <Checkbox
                    id="require-accept-checkbox"
                    label={ I18n.t('checkboxLabels.requireAccept') }
                    name="require-accept"
                    checked={ requireAccept }
                    onChange={ (e) => setRequireAccept(e.target.checked) }
                  />
                  <Checkbox
                    id="send-email-checkbox"
                    label={ I18n.t('checkboxLabels.sendEmail') }
                    name="send-email"
                    checked={ sendEmail }
                    onChange={ (e) => setSendEmail(e.target.checked) }
                  />
                </CheckboxGroup>
              </Pod>
              <Pod
                mb="3"
              >
                <Textarea
                  label={ I18n.t('fields.description.label') }
                  inputHint={ I18n.t('fields.description.hint') }
                  onChange={(e) => console.log(e.target.value)}
                  rows={4}
                  aria-label={ I18n.t('ariaLabels.description') }
                />
              </Pod>
            </Box>
          </Box>
        </Form>
      </Box>
    </Dialog>
  );
};

App.propTypes = {
  locale: PropTypes.string,
  initialRequireAccept: PropTypes.bool,
  initialSendEmail: PropTypes.bool,
  initialDirectManager: PropTypes.bool,
  initialTeamManager: PropTypes.bool,
  initialShareWith: PropTypes.string,
  open: PropTypes.bool,
  onClose: PropTypes.func,
  employees: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      image: PropTypes.string,
      initials: PropTypes.string
    })
  )
};

export default App;

import I18n from 'i18n-js';

const translations = {
  en: {
    header: {
      title: "Create document with Sage Copilot",
      subtitle: "Draft a document by selecting a document topic or writing your own prompt."
    },
    sections: {
      documentSettings: "Document settings",
      accessSettings: "Give access to:",
      shareSettings: "Share document with:"
    },
    checkboxLabels: {
      requireAccept: "Require employee to accept document",
      sendEmail: "Send email notification",
      directManager: "Direct manager",
      teamManager: "Team manager",
      hideUnselected: "Hide unselected"
    },
    radioLabels: {
      everyone: "Everyone",
      specificEmployees: "Specific employees"
    },
    buttons: {
      cancel: "Cancel",
      back: "Back",
      save: "Save",
      filter: "Filter",
      selectAll: "Select all (%{count})",
      clearSelection: "Clear selection"
    },
    fields: {
      description: {
        label: 'Description',
        hint: 'Hint text'
      }
    },
    ariaLabels: {
      searchEmployees: "Search employees",
      filterEmployees: "Filter employees",
      selectAllEmployees: "Select all employees",
      clearEmployeeSelection: "Clear employee selection",
      hideUnselectedEmployees: "Hide unselected employees",
      selectEmployee: "Select %{name}",
      description: 'Document description field'
    },
    placeholders: {
      search: "Search..."
    }
  }
};

// Configure I18n with our translations
I18n.translations = translations;
I18n.defaultLocale = 'en';
I18n.fallbacks = true;

export default translations;

import React from "react";
import { createRoot } from "react-dom/client";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const container = document.getElementById("app");
const root = createRoot(container);
const employees = [
  { id: '1', name: 'Adam Brown', image: 'image 1.png' },
  { id: '2', name: 'Dylan Evans', image: 'image 1.png' },
  { id: '3', name: 'Grace Harris', image: 'image 1.png' },
  { id: '4', name: 'Jacob King', initials: 'jk' },
  { id: '5', name: 'Kimberly Knight', initials: 'kk' },
  { id: '6', name: 'Lucas Moore', initials: 'lm' },
  { id: '7', name: 'Nicole Parker', initials: 'np' },
  { id: '8', name: 'Bella Clark', initials: 'SD' },
  { id: '9', name: 'Emily Fisher', image: 'image 1.png' },
  { id: '10', name: 'Harry irving', initials: 'SD' },
  { id: '11', name: 'Kelsey King', image: 'image 1.png' },
  { id: '12', name: 'Liam Mitchell', initials: 'lm' },
  { id: '13', name: 'Caleb Davis', image: 'image 1.png' },
  { id: '14', name: 'Finn Gibson', image: 'image 1.png' },
  { id: '15', name: 'Isla Johnson', initials: 'SD' },
  { id: '16', name: 'Kate Lawson', image: 'image 1.png' },
  { id: '17', name: 'Kate Lawson', image: 'image 1.png' },
  { id: '18', name: 'Kate Lawson', image: 'image 1.png' },
  { id: '19', name: 'Kate Lawson', image: 'image 1.png' },
  { id: '20', name: 'Kate Lawson', image: 'image 1.png' },
  { id: '21', name: 'Kate Lawson', image: 'image 1.png' }
];

root.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle />
    <App
      locale="en"
      initialRequireAccept={ false }
      initialSendEmail={ false }
      initialDirectManager={ false }
      initialTeamManager={ false }
      initialShareWith="everyone"
      employees={ employees }
    />
  </CarbonProvider>
);