@servicetitan/titan-chat-ui 1.0.1

package/dist/stores/index.d.ts

@@ -0,0 +1,3 @@
+export { CHAT_UI_STORE_TOKEN, IChatUiStore, ChatUiStore, ChatUiEvent, symbolUser, symbolAgent, ChatUiEventListener, } from './chat-ui.store';
+export { CHAT_UI_BACKEND_STORE_TOKEN, IChatUiBackendStore } from './chat-ui-backend.store';
+//# sourceMappingURL=index.d.ts.map

package/dist/stores/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stores/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,mBAAmB,EACnB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,EACX,mBAAmB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,2BAA2B,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/stores/index.js

@@ -0,0 +1,3 @@
+export { CHAT_UI_STORE_TOKEN, ChatUiStore, ChatUiEvent, symbolUser, symbolAgent, } from './chat-ui.store';
+export { CHAT_UI_BACKEND_STORE_TOKEN } from './chat-ui-backend.store';
+//# sourceMappingURL=index.js.map

package/dist/stores/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/stores/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,mBAAmB,EAEnB,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,GAEd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,2BAA2B,EAAuB,MAAM,yBAAyB,CAAC"}

package/dist/utils/text-utils.d.ts

@@ -0,0 +1,11 @@
+export declare function formatChatMessageDate(date: Date): string;
+export declare const getFirstName: (name: string) => string;
+export declare const getNameInitials: (name: string) => string;
+export declare const getNameInitialsFirst: (name: string) => string;
+export declare const extractFilenameAndExt: (fileName: string) => [string, string];
+export declare const ellipsisText: (text: string, lineLength: number, linesCount: number, lastLineLength?: number) => {
+    lines: string[];
+    isCut: boolean;
+};
+export declare function extractContentFromHtml(html: string): string;
+//# sourceMappingURL=text-utils.d.ts.map

package/dist/utils/text-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-utils.d.ts","sourceRoot":"","sources":["../../src/utils/text-utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,IAAI,UAK/C;AAED,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,MAG3C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,KAAG,MAO9C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,KAAG,MAGnD,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CASvE,CAAC;AAEF,eAAO,MAAM,YAAY,GACrB,MAAM,MAAM,EACZ,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,iBAAgB,MAAmB,KACpC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAgCnC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,UAgBlD"}

package/dist/utils/text-utils.js

@@ -0,0 +1,82 @@
+export function formatChatMessageDate(date) {
+    return date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+export const getFirstName = (name) => {
+    const parts = name.split(' ');
+    return parts[0];
+};
+export const getNameInitials = (name) => {
+    const parts = name.split(' ');
+    return parts
+        .filter(Boolean)
+        .splice(0, 2)
+        .map(p => p[0].toUpperCase())
+        .join('');
+};
+export const getNameInitialsFirst = (name) => {
+    const initials = getNameInitials(name);
+    return initials.length > 0 ? initials[0] : '';
+};
+export const extractFilenameAndExt = (fileName) => {
+    const lastIndex = fileName.lastIndexOf('.');
+    if (lastIndex === -1) {
+        return [fileName, ''];
+    }
+    return [
+        fileName.substring(0, lastIndex) + '.',
+        fileName.substring(lastIndex + 1, fileName.length),
+    ];
+};
+export const ellipsisText = (text, lineLength, linesCount, lastLineLength = lineLength) => {
+    let lines = text.split('\n').map(l => l.trim());
+    let isCut = false;
+    let charsLeft = lineLength * linesCount - lastLineLength;
+    let linesLeft = linesCount;
+    for (let i = 0; i < lines.length; i++) {
+        let line = lines[i];
+        let linesInRow = Math.trunc(line.length / lineLength);
+        if (line.length % lineLength > 0) {
+            linesInRow++;
+        }
+        if (linesInRow === 0) {
+            linesInRow = 1;
+        }
+        linesLeft -= linesInRow;
+        line = line.slice(0, charsLeft);
+        lines[i] = line;
+        charsLeft = charsLeft - Math.max(lineLength, line.length);
+        if (charsLeft <= 0 || linesLeft <= 0) {
+            isCut = line.length >= lineLength - lastLineLength || i < lines.length - 1;
+            lines = lines.slice(0, i + 1);
+            if (line.length >= lineLength - lastLineLength) {
+                lines[i] = lines[i] + '...';
+            }
+            break;
+        }
+    }
+    return {
+        isCut,
+        lines,
+    };
+};
+export function extractContentFromHtml(html) {
+    const span = document.createElement('span');
+    span.innerHTML = html;
+    function getTextLoop(element) {
+        const texts = [];
+        Array.from(element.childNodes).forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+                texts.push(node.textContent.trim());
+            }
+            else {
+                texts.push(...getTextLoop(node));
+            }
+        });
+        return texts;
+    }
+    return getTextLoop(span).join(' ');
+}
+//# sourceMappingURL=text-utils.js.map

package/dist/utils/text-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-utils.js","sourceRoot":"","sources":["../../src/utils/text-utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@servicetitan/titan-chat-ui",
+    "version": "1.0.1",
+    "description": "Chat experience UI package",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/servicetitan/titan-chatbot-client",
+        "directory": "packages/titan-chat-ui"
+    },
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "scripts": {
+        "publish:local": "yalc publish",
+        "push:local": "yalc push"
+    },
+    "dependencies": {
+        "lodash": "4.17.21",
+        "nanoid": "^5.1.5"
+    },
+    "peerDependencies": {
+        "@servicetitan/confirm": ">=27",
+        "@servicetitan/culture": ">=27",
+        "@servicetitan/design-system": "^14",
+        "@servicetitan/form": ">=27",
+        "@servicetitan/form-state": ">=27",
+        "@servicetitan/react-ioc": ">=24",
+        "@servicetitan/skeleton": ">=8",
+        "@servicetitan/tokens": ">=12.9.0",
+        "axios": ">=0.28.0",
+        "classnames": ">=2.3.0",
+        "formstate": ">=2.0.0",
+        "mobx": ">=6",
+        "mobx-react": ">=9",
+        "mobx-utils": ">=6",
+        "react": "^18",
+        "react-dom": "^18"
+    },
+    "devDependencies": {
+        "cypress": "^14.3.2"
+    },
+    "keywords": [
+        "ServiceTitan"
+    ],
+    "author": "Alexander Yarmolchuk",
+    "publishConfig": {
+        "access": "public"
+    },
+    "cli": {
+        "webpack": false
+    },
+    "gitHead": "88893dad270ac1700a910152b4375b902ba5ad99"
+}

package/src/assets/floating-chat-avatar.svg

@@ -0,0 +1,16 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="url(#paint0_linear_11705_2385)"/>
+    <path d="M36 26.8983V33.0158C36 33.7621 35.6 34.4019 34.9333 34.7351C33.36 35.5081 30.36 37.0141 28.2667 38.0537C27.5067 38.4136 26.8667 38.7334 26.4533 38.96C26.4 38.9867 26.3333 39 26.28 39H26.2667C26.2667 39 26.2267 39 26.2 38.9867C26.0267 38.9467 25.9067 38.7868 25.9067 38.6135V31.4831C25.9067 31.2698 26.0533 31.0699 26.2667 31.0299H27.4667C30.3333 31.0299 32.6667 28.7109 32.6667 25.832V25.5655C32.6667 22.7 30.3333 20.3676 27.4667 20.3676H20.5333C17.6667 20.3676 15.3333 22.7 15.3333 25.5655V25.832C15.3333 28.7109 17.6667 31.0299 20.5333 31.0299H22.08C22.2933 31.0699 22.44 31.2698 22.44 31.4697V38.5868C22.44 38.7468 22.3467 38.88 22.2 38.9334C22.1867 38.9467 22.16 38.96 22.1333 38.96C22.0667 38.9867 21.9733 38.9733 21.8933 38.92L20.9333 38.4536L19.2933 37.6406L13.0667 34.5351C12.4133 34.2153 12 33.5489 12 32.8292V27.0182C12 25.6588 12.24 24.326 12.6667 23.0865C12.72 22.9399 12.7733 22.7533 12.8267 22.6067C12.8267 22.6067 12.8311 22.5978 12.84 22.58C14.1467 19.3147 16.8 16.769 20.12 15.6362C20.2133 15.6095 20.3067 15.5695 20.4 15.5562C21.32 15.2497 22.28 15.0897 23.28 15.0364C23.6133 15.0098 23.9333 15.0098 24.2667 15.0098C25.5067 15.0364 26.6933 15.223 27.7867 15.6095C27.8133 15.6228 27.84 15.6228 27.8667 15.6362C29.64 16.2226 31.2 17.1955 32.4933 18.4883C33.6533 19.6345 34.5733 21.034 35.2 22.58C35.7067 23.9128 36 25.3789 36 26.8983Z" fill="white"/>
+    <path d="M40 23.4735V30.6572C40 30.8838 39.8267 31.057 39.6 31.057H37.84V26.8854C37.84 25.366 37.5867 23.8866 37.1467 22.5272V20.6479C37.1467 19.7816 36.84 18.9819 36.48 18.1956C36.3867 17.9824 36.3333 17.7425 36.3333 17.4892C36.3333 16.5696 37.08 15.8232 38 15.8232C38.92 15.8232 39.6667 16.5696 39.6667 17.4892C39.6667 17.7425 39.6 17.9824 39.5067 18.1956C39.1333 18.9953 38.8133 19.8216 38.8133 20.7146V23.0603H39.6C39.8267 23.0603 40 23.2469 40 23.4735Z" fill="white"/>
+    <path d="M11.6667 17.4756C11.6667 17.7288 11.6133 17.9687 11.52 18.1819C11.16 18.9683 10.8533 19.768 10.8533 20.6343V22.7401C10.4133 24.0862 10.16 25.5256 10.16 27.005V31.0434H8.4C8.17333 31.0434 8 30.8701 8 30.6435V23.4598C8 23.2332 8.17333 23.0466 8.4 23.0466H9.18667V20.7009C9.18667 19.8079 8.86667 18.9816 8.49333 18.1819C8.4 17.9687 8.33333 17.7288 8.33333 17.4756C8.33333 16.5559 9.08 15.8096 10 15.8096C10.92 15.8096 11.6667 16.5559 11.6667 17.4756Z" fill="white"/>
+    <path d="M19.0666 27.2987C19.8987 27.2987 20.5732 26.6244 20.5732 25.7926C20.5732 24.9609 19.8987 24.2866 19.0666 24.2866C18.2345 24.2866 17.5599 24.9609 17.5599 25.7926C17.5599 26.6244 18.2345 27.2987 19.0666 27.2987Z" fill="white"/>
+    <path d="M24.0002 27.2987C24.8323 27.2987 25.5068 26.6244 25.5068 25.7926C25.5068 24.9609 24.8323 24.2866 24.0002 24.2866C23.168 24.2866 22.4935 24.9609 22.4935 25.7926C22.4935 26.6244 23.168 27.2987 24.0002 27.2987Z" fill="white"/>
+    <path d="M28.9334 27.2851C29.7582 27.2851 30.4268 26.6167 30.4268 25.7923C30.4268 24.9679 29.7582 24.2996 28.9334 24.2996C28.1087 24.2996 27.4401 24.9679 27.4401 25.7923C27.4401 26.6167 28.1087 27.2851 28.9334 27.2851Z" fill="white"/>
+    <path d="M27.7071 7.87964C27.8537 7.45315 27.5204 7 27.0671 7H24L22.6667 10.3333L21.3333 7H20.9337C20.4671 7 20.1471 7.43982 20.2937 7.87964L22.1204 13.3441C22.4671 13.2908 22.8137 13.2641 23.1737 13.2508C23.5604 13.2108 23.9204 13.2108 24.3071 13.2108C24.8404 13.2241 25.3604 13.2641 25.8804 13.3441L27.7071 7.87964Z" fill="white"/>
+    <defs>
+        <linearGradient id="paint0_linear_11705_2385" x1="24.0002" y1="0" x2="24.0002" y2="48" gradientUnits="userSpaceOnUse">
+            <stop offset="0.145833" stop-color="#8473E6"/>
+            <stop offset="0.942708" stop-color="#2671EE"/>
+        </linearGradient>
+    </defs>
+</svg>

package/src/components/chat/__tests-cy__/chat-messages.test.tsx

@@ -0,0 +1,36 @@
+import { Provider } from '@servicetitan/react-ioc';
+import { mount } from 'cypress/react';
+import { CHAT_UI_STORE_TOKEN } from '../../../stores';
+import { ChatUiStoreMock } from '../../../stores/__mocks-cy__/chat-ui.store.mock';
+import { ChatMessages } from '../chat-messages';
+
+describe('[ChatMessages]', () => {
+    let storeMock: ChatUiStoreMock;
+
+    beforeEach(() => {
+        cy.viewport(780, 600);
+        cy.clock(new Date('2023-10-01T10:10:00Z').getTime());
+        storeMock = new ChatUiStoreMock();
+    });
+
+    const render = () => {
+        return mount(
+            <Provider
+                singletons={[
+                    {
+                        provide: CHAT_UI_STORE_TOKEN,
+                        useValue: storeMock,
+                    },
+                ]}
+            >
+                <ChatMessages />
+            </Provider>
+        );
+    };
+
+    it('should render default chat', () => {
+        render();
+        cy.getCy('titan-chat-messages').should('be.visible');
+        cy.getCy2('chat-message-normal').should('have.length', 2);
+    });
+});

package/src/components/chat/__tests-cy__/chat.test.tsx

@@ -0,0 +1,156 @@
+import { Container, provide, useDependencies } from '@servicetitan/react-ioc';
+import { mount } from 'cypress/react';
+import { useEffect } from 'react';
+import { ChatParticipantIcon } from '../../../models';
+import {
+    CHAT_UI_BACKEND_STORE_TOKEN,
+    CHAT_UI_STORE_TOKEN,
+    ChatUiStore,
+    IChatUiBackendStore,
+    IChatUiStore,
+} from '../../../stores';
+import { ChatUiBackendEchoStore } from '../../../stores/chat-ui-backend-echo.store';
+import { Chat } from '../chat';
+
+const initContainer = () => {
+    const rootContainer = new Container();
+    const container = new Container();
+    container.parent = rootContainer;
+    container.bind<IChatUiStore>(CHAT_UI_STORE_TOKEN).to(ChatUiStore).inSingletonScope();
+    container
+        .bind<IChatUiBackendStore>(CHAT_UI_BACKEND_STORE_TOKEN)
+        .to(ChatUiBackendEchoStore)
+        .inSingletonScope();
+    return container;
+};
+
+describe('[Chat]', () => {
+    let container: Container;
+    let chatUiStore: IChatUiStore;
+    let chatUiBackendStore: ChatUiBackendEchoStore;
+
+    beforeEach(() => {
+        container = initContainer();
+        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
+        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
+        cy.viewport(780, 800);
+        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
+    });
+
+    const render = () => {
+        const ChatWrapper = provide({
+            singletons: [
+                {
+                    provide: CHAT_UI_STORE_TOKEN,
+                    useValue: chatUiStore,
+                },
+                {
+                    provide: CHAT_UI_BACKEND_STORE_TOKEN,
+                    useValue: chatUiBackendStore,
+                },
+            ],
+        })(() => {
+            const [chatUiStore, chatUiBackendStore] = useDependencies(
+                CHAT_UI_STORE_TOKEN,
+                CHAT_UI_BACKEND_STORE_TOKEN
+            );
+            useEffect(() => {
+                const init = async () => {
+                    chatUiBackendStore.subscribe();
+                    await chatUiStore.run({
+                        agentName: 'EchoBot',
+                        agentIcon: ChatParticipantIcon.Bot,
+                    });
+                };
+                init().then(() => {});
+                return () => chatUiBackendStore.unsubscribe();
+            }, [chatUiStore, chatUiBackendStore]);
+            return <Chat className="h-100vh max-h-100vh" />;
+        });
+
+        cy.spy(chatUiStore, 'run').as('runSpy');
+        mount(<ChatWrapper />);
+
+        cy.getCy('titan-chat-connecting').should('be.visible');
+        cy.tick(1000);
+        return cy.wrap(
+            new Promise(resolve => {
+                cy.get('@runSpy')
+                    .should('have.been.calledOnce')
+                    .then((invocation: any) => {
+                        const initPromise = invocation.firstCall.returnValue as ReturnType<
+                            IChatUiStore['run']
+                        >;
+                        initPromise.then(resolve);
+                    });
+            })
+        );
+    };
+
+    const ask = (message: string) => {
+        cy.getCy('titan-chat-input').type(`${message}{enter}`);
+    };
+
+    it('should render default chat', () => {
+        render().then(() => {
+            cy.getCy('titan-chat-messages').should('be.visible');
+            cy.getCy('chat-message-agent')
+                .should('have.length', 1)
+                .should('be.visible')
+                .should(
+                    'contain.text',
+                    'Hi there! I’m Titan, an AI chatbot powered by Titan Intelligence.'
+                );
+            cy.getCy('titan-chat-notifications').should('exist');
+            cy.getCy('titan-chat-send').should('be.visible').should('be.disabled');
+            cy.getCy('titan-chat-input').should('be.visible').should('not.be.disabled');
+
+            cy.getCy('titan-chat-input').type('Hello');
+            cy.getCy('titan-chat-send').click();
+
+            cy.getCy('chat-message-user')
+                .should('be.visible')
+                .should('have.length', 1)
+                .should('contain.text', 'Hello');
+            cy.getCy('chat-message-typing').should('be.visible');
+            cy.getCy('chat-message-agent').should('have.length', 1);
+
+            cy.tick(1000);
+
+            cy.getCy('chat-message-typing').should('not.exist');
+            cy.getCy('chat-message-agent').should('have.length', 2);
+        });
+    });
+
+    it('should render chat error message', () => {
+        render().then(() => {
+            chatUiStore.setTimer({ secondsTotal: 100, secondsLeft: 10 });
+            chatUiStore.setError('Custom error', 'error message', true);
+
+            cy.getCy('titan-chat-timer').should('not.exist');
+            cy.getCy('titan-chat-error').should('be.visible');
+        });
+    });
+
+    it.only('should handle send message error and retry', () => {
+        render().then(() => {
+            ask('[Error]Custom error message');
+            cy.tick(1000);
+
+            // Check error message
+            cy.getCy('titan-chat-message-user-error')
+                .should('be.visible')
+                .should('contain.text', 'Message not delivered. Retry');
+            cy.getCy('titan-chat-error')
+                .should('be.visible')
+                .should(
+                    'contain.text',
+                    ['Failed to send message', 'Custom error message'].join('')
+                );
+
+            // Retry message
+            cy.getCy('titan-chat-message-user-retry').should('be.visible').click();
+            cy.tick(1000);
+        });
+    });
+});

package/src/components/chat/chat-connecting.tsx

@@ -0,0 +1,23 @@
+import { BodyText, Spinner, Stack } from '@servicetitan/design-system';
+import { FC } from 'react';
+
+interface IChatConnectingProps {
+    className?: string;
+}
+
+export const ChatConnecting: FC<IChatConnectingProps> = ({ className }) => {
+    return (
+        <Stack
+            direction="column"
+            spacing="2"
+            alignItems="center"
+            className={className}
+            data-cy="titan-chat-connecting"
+        >
+            <Stack direction="row" spacing="2" alignItems="center">
+                <Spinner size="tiny" />
+                <BodyText className="c-neutral-100">Starting...</BodyText>
+            </Stack>
+        </Stack>
+    );
+};

package/src/components/chat/chat-error.module.less

@@ -0,0 +1,6 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.banner {
+    border: @spacing-0 !important;
+    margin: @spacing-0 @spacing-3;
+}

package/src/components/chat/chat-error.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const banner: string;
+

package/src/components/chat/chat-error.tsx

@@ -0,0 +1,39 @@
+import { Banner, BodyText, Button } from '@servicetitan/design-system';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC, useCallback } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+import * as Styles from './chat-error.module.less';
+
+export const ChatError: FC = observer(() => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+
+    const handleReconnect = useCallback(async () => {
+        await chatUiStore.recover();
+    }, [chatUiStore]);
+
+    if (!chatUiStore.error) {
+        return null;
+    }
+    return (
+        <Banner
+            status="critical"
+            title={chatUiStore.error.title}
+            icon
+            className={Styles.banner}
+            data-cy="titan-chat-error"
+        >
+            <BodyText el="div">{chatUiStore.error.message}</BodyText>
+            {chatUiStore.error.isRecoverable && (
+                <Button
+                    className="m-t-2 bg-white-i"
+                    small
+                    onClick={handleReconnect}
+                    data-cy="titan-chat-error-recover"
+                >
+                    Reconnect
+                </Button>
+            )}
+        </Banner>
+    );
+});

package/src/components/chat/chat-input-file.tsx

@@ -0,0 +1,68 @@
+import { Eyebrow, FilePicker, Stack } from '@servicetitan/design-system';
+import { FileDescriptor } from '@servicetitan/form';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { observer } from 'mobx-react';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { CHAT_UI_STORE_TOKEN } from '../../stores';
+
+export const ChatInputFile: FC<{ className?: string }> = observer(({ className }) => {
+    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
+    const [fileDescriptor, setFileDescriptor] = useState<FileDescriptor | undefined>(undefined);
+
+    const handleSelected = useCallback(
+        (newAttachments: FileList) => {
+            const fileDescriptor: FileDescriptor = {
+                file: newAttachments[0],
+                displayName: newAttachments[0].name,
+            };
+            setFileDescriptor(fileDescriptor);
+            chatUiStore.setFile(fileDescriptor);
+        },
+        [chatUiStore]
+    );
+
+    const handleReplace = useCallback(
+        ({ newFile }: { file: FileDescriptor; newFile: File }) => {
+            const fileDescriptor: FileDescriptor = {
+                file: newFile,
+                displayName: newFile.name,
+            };
+            setFileDescriptor(fileDescriptor);
+            chatUiStore.setFile(fileDescriptor);
+        },
+        [chatUiStore]
+    );
+
+    const handleDelete = useCallback(() => {
+        setFileDescriptor(undefined);
+        chatUiStore.setFile(undefined);
+    }, [chatUiStore]);
+
+    useEffect(() => {
+        if (!chatUiStore.file) {
+            setFileDescriptor(undefined);
+        }
+    }, [chatUiStore.file]);
+
+    if (!chatUiStore.isFilePickerEnabled) {
+        return null;
+    }
+    return (
+        <Stack className={className} spacing="3" direction="column">
+            <Eyebrow>Upload file</Eyebrow>
+            <FilePicker
+                name="attachments"
+                buttonProps={{
+                    color: 'primary',
+                    fill: 'outline',
+                }}
+                typesNote="e.g. Screenshot of issue"
+                value={fileDescriptor}
+                onSelected={handleSelected}
+                onDelete={handleDelete}
+                onReplace={handleReplace}
+                data-cy="titan-chat-upload-file"
+            />
+        </Stack>
+    );
+});

package/src/components/chat/chat-input.module.less

@@ -0,0 +1,11 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.form-textarea {
+    margin-bottom: @spacing-0 !important;
+
+    textarea {
+        resize: none !important;
+        min-height: 40px;
+        line-height: 24px;
+    }
+}

package/src/components/chat/chat-input.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const formTextarea: string;
+