AC rendering + AC designer integration

packages/devtools/src/App.tsx

@@ -1,33 +1,41 @@
-import { useEffect, useMemo, useCallback, useRef, useDebugValue, useState } from 'react';
+import {
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef,
+  useDebugValue,
+  useState,
+} from "react";
 import {
   Body1,
   FluentProvider,
   mergeClasses,
   teamsDarkTheme,
   teamsLightTheme,
   Toaster,
-} from '@fluentui/react-components';
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router';
-
-import ActivitiesScreen from './screens/ActivitiesScreen/ActivitiesScreen';
-import ChatScreen from './screens/ChatScreen/ChatScreen';
-import Logger from './components/Logger/Logger';
-import PageNav from './components/PageNav/PageNav';
-import CardsScreen from './screens/CardsScreen';
-import CustomScreen from './screens/CustomScreen';
-import useTheme from './hooks/useTheme';
-import { useActivityStore } from './stores/ActivityStore';
-import { useChatStore } from './stores/ChatStore';
-import { MetadataContext, useMetadataStore } from './stores/MetadataStore';
-import { ActivityEvent } from './types/Event';
-import { Page } from './types/Page';
-import useAppClasses from './App.styles';
-import { SocketClient } from './socket-client';
+} from "@fluentui/react-components";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router";
+
+import ActivitiesScreen from "./screens/ActivitiesScreen/ActivitiesScreen";
+import ChatScreen from "./screens/ChatScreen/ChatScreen";
+import Logger from "./components/Logger/Logger";
+import PageNav from "./components/PageNav/PageNav";
+import CardsScreen from "./screens/CardsScreen";
+import CustomScreen from "./screens/CustomScreen";
+import useTheme from "./hooks/useTheme";
+import { useActivityStore } from "./stores/ActivityStore";
+import { useChatStore } from "./stores/ChatStore";
+import { MetadataContext, useMetadataStore } from "./stores/MetadataStore";
+import { ActivityEvent } from "./types/Event";
+import { Page } from "./types/Page";
+import useAppClasses from "./App.styles";
+import { SocketClient } from "./socket-client";
 
 const socket = new SocketClient();
 
 // Memoized selectors
-const selectMetadataPages = (state: any) => state.metadata?.pages as Page[] | undefined;
+const selectMetadataPages = (state: any) =>
+  state.metadata?.pages as Page[] | undefined;
 const selectPutActivity = (state: any) => state.put;
 const selectOnActivity = (state: any) => state.onActivity;
 const selectSetMetadata = (state: any) => state.set;
@@ -40,19 +48,22 @@ export default function App() {
 
   // Use specific selectors with debug values
   const metadataPages = useMetadataStore(selectMetadataPages);
-  useDebugValue(metadataPages?.length ?? 0, (count) => `${count} metadata pages`);
+  useDebugValue(
+    metadataPages?.length ?? 0,
+    (count) => `${count} metadata pages`,
+  );
 
   const putActivity = useActivityStore(selectPutActivity);
   const onActivity = useChatStore(selectOnActivity);
   const setMetadata = useMetadataStore(selectSetMetadata);
 
   const handleConnect = useCallback(() => {
-    Logger.info('Connected to server...');
+    Logger.info("Connected to server...");
     setConnected(true);
   }, []);
 
   const handleDisconnect = useCallback(() => {
-    Logger.info('Disconnected from server...');
+    Logger.info("Disconnected from server...");
     setConnected(false);
   }, []);
 
@@ -64,37 +75,37 @@ export default function App() {
         onActivity(event);
       });
     },
-    [putActivity, onActivity]
+    [putActivity, onActivity],
   );
 
   const handleMetadata = useCallback(
     (event: { body: any }) => {
       setMetadata(event.body);
     },
-    [setMetadata]
+    [setMetadata],
   );
 
   useEffect(() => {
     const socket = socketRef.current;
 
-    socket.on('connect', handleConnect);
-    socket.on('disconnect', handleDisconnect);
-    socket.on('activity', handleActivity);
-    socket.on('metadata', handleMetadata);
+    socket.on("connect", handleConnect);
+    socket.on("disconnect", handleDisconnect);
+    socket.on("activity", handleActivity);
+    socket.on("metadata", handleMetadata);
 
     socket.connect();
 
     return () => {
-      socket.off('connect');
-      socket.off('disconnect');
-      socket.off('activity');
-      socket.off('metadata');
+      socket.off("connect");
+      socket.off("disconnect");
+      socket.off("activity");
+      socket.off("metadata");
       socket.disconnect();
     };
   }, [handleConnect, handleDisconnect, handleActivity, handleMetadata]);
 
   const fluentTheme = useMemo(() => {
-    return theme === 'dark' ? teamsDarkTheme : teamsLightTheme;
+    return theme === "dark" ? teamsDarkTheme : teamsLightTheme;
   }, [theme]);
 
   return (
@@ -115,11 +126,18 @@ export default function App() {
             <PageNav connected={connected} />
             <main id="page-content" className={classes.mainContent}>
               <Routes>
-                <Route path="" element={<ChatScreen isConnected={connected} />} />
+                <Route
+                  path=""
+                  element={<ChatScreen isConnected={connected} />}
+                />
                 <Route path="cards" element={<CardsScreen />} />
                 <Route path="activities" element={<ActivitiesScreen />} />
                 {metadataPages?.map((page: Page) => (
-                  <Route key={page.name} path={page.name} element={<CustomScreen {...page} />} />
+                  <Route
+                    key={page.name}
+                    path={page.name}
+                    element={<CustomScreen {...page} />}
+                  />
                 ))}
                 <Route path="*" element={<Navigate to="/" replace />} />
               </Routes>
@@ -132,4 +150,4 @@ export default function App() {
   );
 }
 
-App.displayName = 'App';
+App.displayName = "App";

packages/devtools/src/components/AttachmentsContainer/AttachmentsContainer.styles.ts

@@ -1,79 +1,75 @@
-import { makeStyles, tokens } from '@fluentui/react-components';
+import { makeStyles, tokens } from "@fluentui/react-components";
 
 const useAttachmentsContainerClasses = makeStyles({
   root: {
     // Card width breakpoints
-    '--card-width-very-narrow': '13.375rem', // 214px
-    '--card-width-narrow': '21.4375rem', // 343px
-    '--card-width-standard': '31.125rem', // 498px
+    "--card-width-very-narrow": "13.375rem", // 214px
+    "--card-width-narrow": "21.4375rem", // 343px
+    "--card-width-standard": "31.125rem", // 498px
   },
   inlineAttachmentsContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: 'fit-content',
+    display: "flex",
+    flexDirection: "column",
+    width: "fit-content",
     padding: tokens.spacingHorizontalS,
-    userSelect: 'none',
+    userSelect: "none",
   },
   inlineAttachmentCard: {
-    backgroundColor: tokens.colorNeutralBackground2,
-    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
-    borderRadius: tokens.borderRadiusSmall,
-    marginBottom: tokens.spacingVerticalXXS,
-    overflow: 'hidden',
-    position: 'relative',
+    overflow: "hidden",
+    position: "relative",
+    height: "fit-content",
   },
   removeAttachmentButton: {
     borderRadius: tokens.borderRadiusSmall,
     backgroundColor: tokens.colorNeutralBackground6,
     border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     boxShadow: tokens.shadow4,
-    position: 'absolute',
+    position: "absolute",
     top: tokens.spacingVerticalXXS,
     right: tokens.spacingHorizontalXXS,
-    '&:hover': {
+    "&:hover": {
       backgroundColor: tokens.colorNeutralBackground3,
     },
   },
   inlineCardContent: {
-    padding: tokens.spacingHorizontalS,
-    width: 'var(--card-width-standard)',
-    overflow: 'auto',
+    width: "var(--card-width-standard)",
+    overflow: "auto",
     '&[data-target-width="veryNarrow"]': {
-      width: 'var(--card-width-very-narrow)',
+      width: "var(--card-width-very-narrow)",
     },
     '&[data-target-width="narrow"]': {
-      width: 'var(--card-width-narrow)',
+      width: "var(--card-width-narrow)",
     },
     '&[data-target-width="standard"]': {
-      width: 'var(--card-width-standard)',
+      width: "var(--card-width-standard)",
     },
     '&[data-target-width="wide"]': {
-      width: '100%',
+      width: "100%",
     },
     '&[data-target-width="atLeast:veryNarrow"]': {
-      minWidth: 'var(--card-width-very-narrow)',
+      minWidth: "var(--card-width-very-narrow)",
     },
     '&[data-target-width="atLeast:narrow"]': {
-      minWidth: 'var(--card-width-narrow)',
+      minWidth: "var(--card-width-narrow)",
     },
     '&[data-target-width="atLeast:standard"]': {
-      minWidth: 'var(--card-width-standard)',
+      minWidth: "var(--card-width-standard)",
     },
     '&[data-target-width="atMost:veryNarrow"]': {
-      maxWidth: 'var(--card-width-very-narrow)',
+      maxWidth: "var(--card-width-very-narrow)",
     },
     '&[data-target-width="atMost:narrow"]': {
-      maxWidth: 'var(--card-width-narrow)',
+      maxWidth: "var(--card-width-narrow)",
     },
     '&[data-target-width="atMost:standard"]': {
-      maxWidth: 'var(--card-width-standard)',
+      maxWidth: "var(--card-width-standard)",
     },
   },
   attachmentImage: {
     borderRadius: tokens.borderRadiusSmall,
   },
   fileAttachment: {
-    display: 'inline-block',
+    display: "inline-block",
     padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
     backgroundColor: tokens.colorNeutralBackground1,
     borderRadius: tokens.borderRadiusSmall,

packages/devtools/src/components/AttachmentsContainer/AttachmentsContainer.tsx

@@ -1,18 +1,21 @@
-import { FC, memo, useCallback } from 'react';
-import { Button, Image, Tooltip } from '@fluentui/react-components';
+import { FC, memo, useCallback } from "react";
+import { Button, Image, Tooltip } from "@fluentui/react-components";
 import {
   bundleIcon,
   DismissFilled,
   DismissRegular,
   FluentIcon,
-} from '@fluentui/react-icons/lib/fonts';
+} from "@fluentui/react-icons/lib/fonts";
 
-import { AttachmentType } from '../../types/Attachment';
-import AdaptiveCard from '../Card/AdaptiveCard';
+import { AttachmentType } from "../../types/Attachment";
+import AdaptiveCard from "../Card/AdaptiveCard";
 
-import useAttachmentsContainerClasses from './AttachmentsContainer.styles';
+import useAttachmentsContainerClasses from "./AttachmentsContainer.styles";
 
-const DismissIcon = bundleIcon(DismissFilled as FluentIcon, DismissRegular as FluentIcon);
+const DismissIcon = bundleIcon(
+  DismissFilled as FluentIcon,
+  DismissRegular as FluentIcon,
+);
 
 interface AttachmentItemProps {
   attachment: AttachmentType;
@@ -27,22 +30,26 @@ const AttachmentItem: FC<AttachmentItemProps> = memo(
 
     const renderAttachmentContent = useCallback(() => {
       switch (attachment.type) {
-        case 'card':
-          return attachment.content && <AdaptiveCard value={attachment.content} />;
-        case 'image':
+        case "card":
+          return (
+            attachment.content && <AdaptiveCard card={attachment.content} />
+          );
+        case "image":
           return (
             <Image
               src={attachment.content}
-              alt={attachment.name || 'Image attachment'}
+              alt={attachment.name || "Image attachment"}
               className={classes.attachmentImage}
             />
           );
-        case 'file':
+        case "file":
           return (
-            <div className={classes.fileAttachment}>{attachment.name || 'File attachment'}</div>
+            <div className={classes.fileAttachment}>
+              {attachment.name || "File attachment"}
+            </div>
           );
         default:
-          return <div>{attachment.name || 'Attachment'}</div>;
+          return <div>{attachment.name || "Attachment"}</div>;
       }
     }, [attachment.content, attachment.type, attachment.name, classes]);
 
@@ -63,14 +70,16 @@ const AttachmentItem: FC<AttachmentItemProps> = memo(
           contentEditable={false}
           className={classes.inlineCardContent}
           data-target-width={
-            attachment.type === 'card' ? attachment.content?.msteams?.targetWidth : undefined
+            attachment.type === "card"
+              ? attachment.content?.msteams?.targetWidth
+              : undefined
           }
         >
           {renderAttachmentContent()}
         </div>
       </div>
     );
-  }
+  },
 );
 
 interface AttachmentsContainerProps {