feat: expose chat container

packages/chat/package.json

@@ -77,7 +77,7 @@
     "@vanilla-extract/css": "1.15.5",
     "@vanilla-extract/recipes": "0.5.5",
     "@voiceflow/base-types": "2.113.1",
-    "@voiceflow/dtos-interact": "1.1.0",
+    "@voiceflow/dtos-interact": "1.9.0",
     "@voiceflow/sdk-runtime": "workspace:*",
     "@voiceflow/slate-serializer": "1.5.5",
     "@voiceflow/voiceflow-types": "3.32.1",

packages/chat/src/components/NewChat/ChatContainer/ChatContainer.component.tsx

@@ -0,0 +1,20 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import type { WidgetSettingsColorPalette } from '@voiceflow/dtos-interact';
+
+import { PALETTE } from '@/styles/colors.css';
+
+import { chatWindowStyle } from './ChatContainer.css';
+
+export interface IChatContainer {
+  palette: WidgetSettingsColorPalette;
+  children?: React.ReactNode;
+  isMobile?: boolean;
+}
+
+export const ChatContainer: React.FC<IChatContainer> = ({ palette, children, isMobile = false }) => {
+  return (
+    <div style={assignInlineVars(PALETTE, { colors: palette })} className={chatWindowStyle({ mobile: isMobile })}>
+      {children}
+    </div>
+  );
+};

packages/chat/src/views/ChatWindow/styles.css.ts → packages/chat/src/components/NewChat/ChatContainer/ChatContainer.css.tsx

@@ -1,6 +1,6 @@
 import { recipe } from '@vanilla-extract/recipes';
 
-export const chatWindow = recipe({
+export const chatWindowStyle = recipe({
   base: {
     height: '100%',
     maxHeight: '800px',

packages/chat/src/components/NewChat/index.tsx

@@ -11,6 +11,7 @@ import { type INewFooter, NewFooter } from '../NewFooter';
 import { Prompt } from '../Prompt';
 import { Separator } from '../Separator';
 import { type IWelcomeMessage, WelcomeMessage } from '../WelcomeMessage';
+import { ChatContainer } from './ChatContainer/ChatContainer.component';
 import { bottomSpacer, chatContainer, chatEndedContainer, dialogContainer } from './NewChat.css';
 
 export interface INewChat
@@ -56,7 +57,7 @@ export interface INewChat
   onStart?: (() => Promise<void>) | undefined;
 }
 
-export const NewChat: React.FC<INewChat> = ({
+const Chat: React.FC<INewChat> = ({
   buttons,
   showPoweredBy,
   messageInputProps,
@@ -138,3 +139,7 @@ export const NewChat: React.FC<INewChat> = ({
     </div>
   );
 };
+
+export const NewChat = Object.assign(Chat, {
+  Container: ChatContainer,
+});

packages/chat/src/views/ChatWindow/index.tsx

@@ -1,6 +1,5 @@
 import '../../styles.css';
 
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React, { useCallback, useContext } from 'react';
 import * as R from 'remeda';
 import { match } from 'ts-pattern';
@@ -11,12 +10,9 @@ import { UserResponse } from '@/components/UserResponse';
 import { RuntimeStateAPIContext, RuntimeStateContext } from '@/contexts/RuntimeContext';
 import type { FeedbackName } from '@/contexts/RuntimeContext/useRuntimeAPI';
 import { usePalette } from '@/hooks/usePalette';
-import { PALETTE } from '@/styles/colors.css';
 import type { UserTurnProps } from '@/types';
 import { SessionStatus, TurnType } from '@/types';
 
-import { chatWindow } from './styles.css';
-
 export interface ChatWindowProps {
   className?: string;
   isMobile?: boolean;
@@ -45,7 +41,7 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile }) => {
   if (!palette) return null;
 
   return (
-    <div style={assignInlineVars(PALETTE, { colors: palette })} className={chatWindow({ mobile: isMobile })}>
+    <NewChat.Container isMobile={isMobile} palette={palette}>
       <NewChat
         title={assistant.title}
         description={assistant.description}
@@ -94,6 +90,6 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile }) => {
         })}
         {state.indicator && <Indicator avatar={assistant.avatar} isLast={true} />}
       </NewChat>
-    </div>
+    </NewChat.Container>
   );
 };

yarn.lock

@@ -7480,6 +7480,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@voiceflow/dtos-interact@npm:1.9.0":
+  version: 1.9.0
+  resolution: "@voiceflow/dtos-interact@npm:1.9.0"
+  peerDependencies:
+    zod: ^3
+  checksum: 676a4d808f5f1191703fdc4b27f0d059774141bf9a4c2294bac16c25786fd2efd0e5a15c9637ae807ee2764db3be6a14c259e686b03beac04df341aee2795694
+  languageName: node
+  linkType: hard
+
 "@voiceflow/eslint-config@npm:7.5.0":
   version: 7.5.0
   resolution: "@voiceflow/eslint-config@npm:7.5.0"
@@ -7651,7 +7660,7 @@ __metadata:
     "@vanilla-extract/vite-plugin": 4.0.15
     "@vitejs/plugin-react": 4.2.1
     "@voiceflow/base-types": 2.113.1
-    "@voiceflow/dtos-interact": 1.1.0
+    "@voiceflow/dtos-interact": 1.9.0
     "@voiceflow/sdk-runtime": "workspace:*"
     "@voiceflow/slate-serializer": 1.5.5
     "@voiceflow/test-common": 1.10.3