box-ui-elements 24.0.0-beta.3 → 24.0.0-beta.5

package/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -3,7 +3,9 @@ import { http, HttpResponse } from 'msw';
 import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
 import { Sign } from '@box/blueprint-web-assets/icons/Line';
 import { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';
+
 import noop from 'lodash/noop';
+import orderBy from 'lodash/orderBy';
 
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
@@ -138,17 +140,16 @@ export const metadataViewV2: Story = {
     args: metadataViewV2ElementProps,
 };
 
-// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented
 export const metadataViewV2SortsFromHeader: Story = {
     args: metadataViewV2ElementProps,
     play: async ({ canvas }) => {
-        await waitFor(() => {
-            expect(canvas.getByRole('row', { name: /Industry/i })).toBeInTheDocument();
-        });
+        const industryHeader = await canvas.findByRole('columnheader', { name: 'Industry' });
+        expect(industryHeader).toBeInTheDocument();
+
+        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });
+        expect(firstRow).toBeInTheDocument();
 
-        const firstRow = canvas.getByRole('row', { name: /Industry/i });
-        const industryHeader = within(firstRow).getByRole('columnheader', { name: 'Industry' });
-        userEvent.click(industryHeader);
+        await userEvent.click(industryHeader);
     },
 };
 
@@ -237,6 +238,37 @@ export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {
     },
 };
 
+export const sidePanelOpenWithMultipleItemsSelected: Story = {
+    args: {
+        ...metadataViewV2ElementProps,
+        metadataViewProps: {
+            columns,
+            tableProps: {
+                isSelectAllEnabled: true,
+            },
+        },
+    },
+
+    play: async ({ canvas }) => {
+        await waitFor(() => {
+            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
+        });
+
+        // Select the first row by clicking its checkbox
+        const firstItem = canvas.getByRole('row', { name: /Child 2/i });
+        const checkbox = within(firstItem).getByRole('checkbox');
+        await userEvent.click(checkbox);
+
+        // Select the second row by clicking its checkbox
+        const secondItem = canvas.getAllByRole('row', { name: /Child 1/i })[0];
+        const secondCheckbox = within(secondItem).getByRole('checkbox');
+        await userEvent.click(secondCheckbox);
+
+        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });
+        await userEvent.click(metadataButton);
+    },
+};
+
 const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/MetadataView/visual',
     component: ContentExplorer,
@@ -248,7 +280,21 @@ const meta: Meta<typeof ContentExplorer> = {
     parameters: {
         msw: {
             handlers: [
-                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {
+                // Note that the Metadata API backend normally handles the sorting. The mocks below simulate the sorting for specific cases, but may not 100% accurately reflect the backend behavior.
+                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({ request }) => {
+                    const body = await request.clone().json();
+                    const orderByDirection = body.order_by[0].direction;
+                    const orderByFieldKey = body.order_by[0].field_key;
+
+                    // Hardcoded case for sorting by industry
+                    if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {
+                        const sortedMetadata = orderBy(
+                            mockMetadata.entries,
+                            'metadata.enterprise_0.templateName.industry',
+                            'asc',
+                        );
+                        return HttpResponse.json({ ...mockMetadata, entries: sortedMetadata });
+                    }
                     return HttpResponse.json(mockMetadata);
                 }),
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {

package/src/elements/content-explorer/utils.ts

@@ -1,12 +1,24 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import isNil from 'lodash/isNil';
+import xor from 'lodash/xor';
 
-import type { MetadataTemplate } from '@box/metadata-editor';
+import {
+    MULTI_VALUE_DEFAULT_OPTION,
+    MULTI_VALUE_DEFAULT_VALUE,
+    type MetadataTemplate,
+    type MetadataFormFieldValue,
+} from '@box/metadata-editor';
+import type { MetadataFieldType } from '@box/metadata-view';
 import type { Selection } from 'react-aria-components';
 import type { BoxItem, Collection } from '../../common/types/core';
 
 import messages from '../common/messages';
 
+// Specific type for metadata field value in the item
+// Note: Item doesn't have field value in metadata object if that field is not set, so the value will be undefined in this case
+type ItemMetadataFieldValue = string | number | Array<string> | null | undefined;
+
 // Get selected item text
 export function useSelectedItemText(currentCollection: Collection, selectedItemIds: Selection): string {
     const { formatMessage } = useIntl();
@@ -28,21 +40,146 @@ export function useSelectedItemText(currentCollection: Collection, selectedItemI
     }, [currentCollection.items, formatMessage, selectedItemIds]);
 }
 
+// Check if the field value is empty.
+// Note: 0 doesn't represent empty here because of float type field
+export function isEmptyValue(value: ItemMetadataFieldValue) {
+    if (isNil(value)) {
+        return true;
+    }
+
+    // date, string, enum
+    if (value === '') {
+        return true;
+    }
+
+    // multiSelect
+    if (Array.isArray(value) && value.length === 0) {
+        return true;
+    }
+
+    // float
+    if (Number.isNaN(value)) {
+        return true;
+    }
+
+    return false;
+}
+
+// Check if the field values are equal based on the field types
+export function areFieldValuesEqual(value1: ItemMetadataFieldValue, value2: ItemMetadataFieldValue) {
+    if (isEmptyValue(value1) && isEmptyValue(value2)) {
+        return true;
+    }
+
+    // Handle multiSelect arrays comparison
+    if (Array.isArray(value1) && Array.isArray(value2)) {
+        return xor(value1, value2).length === 0;
+    }
+
+    return value1 === value2;
+}
+
+// Return default form value by field type
+function getDefaultValueByFieldType(fieldType: MetadataFieldType) {
+    if (fieldType === 'date' || fieldType === 'enum' || fieldType === 'float' || fieldType === 'string') {
+        return '';
+    }
+    if (fieldType === 'multiSelect') {
+        return [];
+    }
+    return undefined;
+}
+
+// Set the field value in Metadata Form based on the field type
+function getFieldValue(fieldType: MetadataFieldType, fieldValue: ItemMetadataFieldValue) {
+    if (isNil(fieldValue)) {
+        return getDefaultValueByFieldType(fieldType);
+    }
+    return fieldValue;
+}
+
+// Check if the field value in Metadata Form is multi-values such as "Multiple values"
+export function isMultiValuesField(fieldType: MetadataFieldType, fieldValue: MetadataFormFieldValue) {
+    if (fieldType === 'multiSelect') {
+        return Array.isArray(fieldValue) && fieldValue.length === 1 && fieldValue[0] === MULTI_VALUE_DEFAULT_VALUE;
+    }
+    if (fieldType === 'enum') {
+        return fieldValue === MULTI_VALUE_DEFAULT_VALUE;
+    }
+    return false;
+}
+
 // Get template instance based on metadata template and selected items
-export function getTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[]) {
+export function useTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[], isEditing: boolean) {
+    const { formatMessage } = useIntl();
     const { displayName, fields, hidden, id, scope, templateKey, type } = metadataTemplate;
 
     const selectedItemsFields = fields.map(
-        ({ displayName: fieldDisplayName, hidden: fieldHidden, id: fieldId, key, options, type: fieldType }) => ({
-            displayName: fieldDisplayName,
-            hidden: fieldHidden,
-            id: fieldId,
-            key,
-            options,
-            type: fieldType,
-            // TODO: Add support for multiple selected items
-            value: selectedItems[0].metadata[scope][templateKey][key],
-        }),
+        ({ displayName: fieldDisplayName, hidden: fieldHidden, id: fieldId, key, options, type: fieldType }) => {
+            const defaultItemField = {
+                displayName: fieldDisplayName,
+                hidden: fieldHidden,
+                id: fieldId,
+                key,
+                options,
+                type: fieldType,
+                value: getFieldValue(fieldType as MetadataFieldType, undefined),
+            };
+
+            const firstSelectedItem = selectedItems[0];
+            const firstSelectedItemFieldValue = firstSelectedItem.metadata[scope][templateKey][key];
+
+            // Case 1: Single selected item
+            if (selectedItems.length <= 1) {
+                return {
+                    ...defaultItemField,
+                    value: firstSelectedItemFieldValue,
+                };
+            }
+
+            // Case 2.1: Multiple selected items, but all have the same initial value
+            const allItemsHaveSameInitialValue = selectedItems.every(selectedItem =>
+                areFieldValuesEqual(selectedItem.metadata[scope][templateKey][key], firstSelectedItemFieldValue),
+            );
+
+            if (allItemsHaveSameInitialValue) {
+                return {
+                    ...defaultItemField,
+                    value: getFieldValue(fieldType as MetadataFieldType, firstSelectedItemFieldValue),
+                };
+            }
+
+            // Case 2.2: Multiple selected items, but some have different initial values
+            // Case 2.2.1: Edit Mode
+            if (isEditing) {
+                let fieldValue = getFieldValue(fieldType as MetadataFieldType, undefined);
+                // Add MultiValue Option if the field is multiSelect or enum
+                if (fieldType === 'multiSelect' || fieldType === 'enum') {
+                    fieldValue = fieldType === 'enum' ? MULTI_VALUE_DEFAULT_VALUE : [MULTI_VALUE_DEFAULT_VALUE];
+                    const multiValueOption = options?.find(option => option.key === MULTI_VALUE_DEFAULT_VALUE);
+                    if (!multiValueOption) {
+                        options?.push(MULTI_VALUE_DEFAULT_OPTION);
+                    }
+                }
+                return {
+                    ...defaultItemField,
+                    value: fieldValue,
+                };
+            }
+
+            /**
+             * Case: 2.2.2 View Mode
+             *
+             * We want to show "Multiple values" label for multiple dates across files selection.
+             * We use fragment here to bypass check in shared feature.
+             * This feature tries to parse string as date if the string is passed as value.
+             */
+            const multipleValuesText = formatMessage(messages.multipleValues);
+            return {
+                ...defaultItemField,
+                value: React.createElement(React.Fragment, null, multipleValuesText),
+            };
+        },
     );
 
     return {

package/src/elements/content-picker/ContentPicker.js

@@ -9,6 +9,7 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
+import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import uniqueid from 'lodash/uniqueId';
 import noop from 'lodash/noop';
@@ -18,6 +19,8 @@ import UploadDialog from '../common/upload-dialog';
 import CreateFolderDialog from '../common/create-folder-dialog';
 import Internationalize from '../common/Internationalize';
 import makeResponsive from '../common/makeResponsive';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 // $FlowFixMe TypeScript file
 import ThemingStyles from '../common/theming';
 import Pagination from '../../features/pagination';
@@ -1345,4 +1348,4 @@ class ContentPicker extends Component<Props, State> {
 }
 
 export { ContentPicker as ContentPickerComponent };
-export default makeResponsive(ContentPicker);
+export default flow([makeResponsive, withBlueprintModernization])(ContentPicker);

package/src/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

@@ -8,6 +8,12 @@ import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 
 export const basic = {};
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const withPagination = {
     args: {
         initialPageSize: 1,

package/src/elements/content-preview/ContentPreview.js

@@ -35,6 +35,8 @@ import { withLogger } from '../common/logger';
 import { PREVIEW_FIELDS_TO_FETCH } from '../../utils/fields';
 import { mark } from '../../utils/performance';
 import { withFeatureConsumer, withFeatureProvider } from '../common/feature-checking';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import { EVENT_JS_READY } from '../common/logger/constants';
 import ReloadNotification from './ReloadNotification';
 import API from '../../api';
@@ -1418,6 +1420,7 @@ export default flow([
     withNavRouter,
     withFeatureConsumer,
     withFeatureProvider,
+    withBlueprintModernization,
     withLogger(ORIGIN_CONTENT_PREVIEW),
     withErrorBoundary(ORIGIN_CONTENT_PREVIEW),
 ])(ContentPreview);

package/src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -30,6 +30,12 @@ export const basic = {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const closeModal = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -92,7 +98,7 @@ export const hoverOverCitation = {
 
         expect(modal.getByText('Based on:')).toBeInTheDocument();
 
-        const citations = await modal.getAllByTestId('content-answers-citation-status')
+        const citations = await modal.getAllByTestId('content-answers-citation-status');
         const citation = citations[0];
         expect(citation).toBeInTheDocument();
         await userEvent.hover(citation);

package/src/elements/content-sharing/ContentSharing.js

@@ -9,6 +9,8 @@
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import API from '../../api';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import SharingModal from './SharingModal';
 import { CLIENT_NAME_CONTENT_SHARING, DEFAULT_HOSTNAME_API } from '../../constants';
 import type { ItemType, StringMap } from '../../common/types/core';
@@ -118,4 +120,5 @@ function ContentSharing({
     );
 }
 
-export default ContentSharing;
+export { ContentSharing as ContentSharingComponent };
+export default withBlueprintModernization(ContentSharing);

package/src/elements/content-sidebar/ContentSidebar.js

@@ -21,6 +21,8 @@ import { EVENT_JS_READY } from '../common/logger/constants';
 import { mark } from '../../utils/performance';
 import { SIDEBAR_FIELDS_TO_FETCH, SIDEBAR_FIELDS_TO_FETCH_ARCHIVE } from '../../utils/fields';
 import { withErrorBoundary } from '../common/error-boundary';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import {
     isFeatureEnabled as isFeatureEnabledInContext,
     withFeatureConsumer,
@@ -432,6 +434,7 @@ export { ContentSidebar as ContentSidebarComponent };
 export default flow([
     withFeatureConsumer,
     withFeatureProvider,
+    withBlueprintModernization,
     withLogger(ORIGIN_CONTENT_SIDEBAR),
     withErrorBoundary(ORIGIN_CONTENT_SIDEBAR),
 ])(ContentSidebar);

package/src/elements/content-sidebar/stories/tests/ContentSidebar-visual.stories.tsx

@@ -23,6 +23,12 @@ export default {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const ContentSidebarWithBoxAIDisabled: StoryObj<typeof BoxAISidebar> = {
     args: {
         features: {

package/src/elements/content-uploader/ContentUploader.tsx

@@ -2,6 +2,7 @@ import 'regenerator-runtime/runtime';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import cloneDeep from 'lodash/cloneDeep';
+import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import uniqueid from 'lodash/uniqueId';
@@ -14,6 +15,7 @@ import API from '../../api';
 import Browser from '../../utils/Browser';
 import Internationalize from '../common/Internationalize';
 import makeResponsive from '../common/makeResponsive';
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import ThemingStyles, { Theme } from '../common/theming';
 import FolderUpload from '../../api/uploads/FolderUpload';
 import { getTypedFileId, getTypedFolderId } from '../../utils/file';
@@ -1323,5 +1325,5 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
     }
 }
 
-export default makeResponsive(ContentUploader);
+export default flow([makeResponsive, withBlueprintModernization])(ContentUploader);
 export { ContentUploader as ContentUploaderComponent, CHUNKED_UPLOAD_MIN_SIZE_BYTES };

package/src/elements/content-uploader/stories/tests/ContentUploader-visual.stories.js

@@ -23,6 +23,12 @@ export const basic = {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const singleUpload = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

package/src/features/classification/applied-by-ai-classification-reason/AppliedByAiClassificationReason.scss

@@ -0,0 +1,29 @@
+$reason-font-size: 13px; // Overriding Blueprint to match current sidebar styles
+
+.AppliedByAiClassificationReason {
+    .AppliedByAiClassificationReason-headerText {
+        font-size: $reason-font-size;
+    }
+
+    .AppliedByAiClassificationReason-answer {
+        font-size: $reason-font-size;
+        line-height: var(--body-default-line-height);
+    }
+
+    .AppliedByAiClassificationReason-references {
+        > * > * {
+            font-size: $reason-font-size;
+        }
+    }
+}
+
+.AppliedByAiClassificationReason-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: 0 0 var(--space-2);
+}
+
+.AppliedByAiClassificationReason-references {
+    margin-top: var(--space-2);
+}

package/src/features/classification/applied-by-ai-classification-reason/AppliedByAiClassificationReason.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { AnswerContent, References } from '@box/box-ai-content-answers';
+import { Card, Text } from '@box/blueprint-web';
+import BoxAIIconColor from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { FormattedDate, FormattedMessage } from 'react-intl';
+
+import { isValidDate } from '../../../utils/datetime';
+import type { AiClassificationReason } from '../types';
+
+import messages from './messages';
+
+import './AppliedByAiClassificationReason.scss';
+
+export type AppliedByAiClassificationReasonProps = AiClassificationReason;
+
+const AppliedByAiClassificationReason = ({ answer, modifiedAt, citations }: AppliedByAiClassificationReasonProps) => {
+    const modifiedDate = new Date(modifiedAt);
+    const isModifiedDateAvailable = Boolean(modifiedAt) && isValidDate(modifiedDate);
+
+    const formattedModifiedAt = isModifiedDateAvailable && (
+        <FormattedDate value={modifiedDate} month="long" year="numeric" day="numeric" />
+    );
+
+    return (
+        <Card className="AppliedByAiClassificationReason">
+            <h3 className="AppliedByAiClassificationReason-header">
+                <BoxAIIconColor data-testid="box-ai-icon" height={Size5} width={Size5} />
+                <Text
+                    className="AppliedByAiClassificationReason-headerText"
+                    as="span"
+                    color="textOnLightSecondary"
+                    variant="bodyDefaultSemibold"
+                >
+                    {isModifiedDateAvailable ? (
+                        <FormattedMessage
+                            {...messages.appliedByBoxAiOnDate}
+                            values={{ modifiedAt: formattedModifiedAt }}
+                        />
+                    ) : (
+                        <FormattedMessage {...messages.appliedByBoxAi} />
+                    )}
+                </Text>
+            </h3>
+            <AnswerContent className="AppliedByAiClassificationReason-answer" answer={answer} />
+            {citations && (
+                <div className="AppliedByAiClassificationReason-references">
+                    <References citations={citations} />
+                </div>
+            )}
+        </Card>
+    );
+};
+
+export default AppliedByAiClassificationReason;

package/src/features/classification/applied-by-ai-classification-reason/__tests__/AppliedByAiClassificationReason.test.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+
+import { render, screen } from '../../../../test-utils/testing-library';
+import AppliedByAiClassificationReason from '../AppliedByAiClassificationReason';
+
+import messages from '../messages';
+
+describe('AppliedByAiClassificationReason', () => {
+    let defaultProps;
+    let modifiedAtDisplayDate;
+
+    beforeEach(() => {
+        defaultProps = {
+            answer: 'This file is marked as Internal Only because it contains non-public financial results.',
+            modifiedAt: '2024-01-15T10:30:00Z',
+        };
+        modifiedAtDisplayDate = 'January 15, 2024';
+    });
+
+    const renderComponent = (props = {}) => {
+        return render(<AppliedByAiClassificationReason {...defaultProps} {...props} />);
+    };
+
+    test('should render AI classification reason with icon, applied date, and reasoning', () => {
+        const expectedIconSize = '1.25rem';
+
+        renderComponent();
+
+        const boxAiIcon = screen.getByTestId('box-ai-icon');
+        const appliedByWithDate = screen.getByRole('heading', {
+            level: 3,
+            name: messages.appliedByBoxAiOnDate.defaultMessage.replace('{modifiedAt}', modifiedAtDisplayDate),
+        });
+        const reasonText = screen.getByText(defaultProps.answer);
+        const citationsLabel = screen.queryByTestId('content-answers-references-label');
+        const noReferencesIconContainer = screen.queryByTestId('content-answers-references-no-references');
+
+        expect(boxAiIcon).toBeVisible();
+        expect(boxAiIcon).toHaveAttribute('height', expectedIconSize);
+        expect(boxAiIcon).toHaveAttribute('width', expectedIconSize);
+        expect(appliedByWithDate).toBeVisible();
+        expect(reasonText).toBeVisible();
+        // Assert none of the Reference components are rendered
+        expect(citationsLabel).toBeNull();
+        expect(noReferencesIconContainer).toBeNull();
+    });
+
+    test('should render no references icon when an empty citations array provided', () => {
+        renderComponent({ citations: [] });
+
+        const noReferencesIconContainer = screen.queryByTestId('content-answers-references-no-references');
+        const noReferencesIcon = noReferencesIconContainer.querySelector('svg');
+
+        expect(noReferencesIcon).toBeVisible();
+    });
+
+    test('should render references when non-empty citations are provided', () => {
+        const expectedCitationsCount = 5;
+        const expectedCitations = Array.from({ length: expectedCitationsCount }, () => ({
+            content: 'file content for citation',
+            fileId: 'fileId',
+            location: 'cited location',
+            title: 'file title',
+        }));
+
+        renderComponent({ citations: expectedCitations });
+
+        const citationsLabel = screen.queryByTestId('content-answers-references-label');
+        const citationElements = screen.getAllByTestId('content-answers-citation-status');
+
+        expect(citationsLabel).toBeVisible();
+        expect(citationElements).toHaveLength(expectedCitationsCount);
+    });
+
+    test.each([null, undefined, 'invalid date str'])(
+        'should render applied by without date when modifiedAt is invalid: %s',
+        invalidModifiedAt => {
+            renderComponent({ modifiedAt: invalidModifiedAt });
+
+            const appliedByWithoutDate = screen.getByRole('heading', {
+                level: 3,
+                name: messages.appliedByBoxAi.defaultMessage,
+            });
+
+            expect(appliedByWithoutDate).toBeVisible();
+        },
+    );
+
+    test('should render long answer text correctly', () => {
+        const longAnswer = 'A'.repeat(1000);
+        renderComponent({ answer: longAnswer });
+
+        expect(screen.getByText(longAnswer)).toBeVisible();
+    });
+
+    test('should render answer with special and unicode characters correctly', () => {
+        const nonPlainAnswer = 'Answer with special characters and unicode !@#$%^&*()_+-=[]{}|;:,.<>? 🚀🌟🎉中文日本語';
+
+        renderComponent({ answer: nonPlainAnswer });
+
+        const reasonText = screen.getByText(nonPlainAnswer);
+
+        expect(reasonText).toBeVisible();
+    });
+});

package/src/features/classification/applied-by-ai-classification-reason/messages.ts

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    appliedByBoxAi: {
+        defaultMessage: 'Box AI',
+        description:
+            'Title of the card that shows the reason why the AI classification was applied when no date is available.',
+        id: 'boxui.classification.appliedByBoxAi',
+    },
+    appliedByBoxAiOnDate: {
+        defaultMessage: 'Box AI on {modifiedAt}',
+        description:
+            'Title of the card that shows the reason why the AI classification was applied on a specific date.',
+        id: 'boxui.classification.appliedByBoxAiOnDate',
+    },
+});
+
+export default messages;

package/src/features/classification/types.ts

@@ -0,0 +1,7 @@
+import type { CitationType } from '@box/box-ai-content-answers';
+
+export type AiClassificationReason = {
+    answer: string;
+    modifiedAt?: string;
+    citations?: CitationType[];
+};