[devtools] Fixed pasted JSON card render (#78)

* Fixed pasted JSON card render

* Update ComposeBoxToolbar.tsx

* Update package.json

---------

Co-authored-by: Corina Gum <>
Co-authored-by: Alex Acebo <[email protected]>

Author: corinagum

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

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { Button, Image } from '@fluentui/react-components';
 import { Dismiss20Regular } from '@fluentui/react-icons/lib/fonts';
 
@@ -20,13 +20,7 @@ const AttachmentItem = memo(
   }) => {
     const classes = useClasses();
 
-    // Create a stable key based on content
-    const contentKey =
-      typeof attachment.content === 'object'
-        ? JSON.stringify(attachment.content).substring(0, 20)
-        : String(attachment.content).substring(0, 20);
-
-    const renderAttachmentContent = () => {
+    const renderAttachmentContent = useCallback(() => {
       switch (attachment.type) {
         case 'card':
           return attachment.content && <AdaptiveCard value={attachment.content} />;
@@ -45,10 +39,10 @@ const AttachmentItem = memo(
         default:
           return <div>{attachment.name || 'Attachment'}</div>;
       }
-    };
+    }, [attachment.content, attachment.type, attachment.name, classes]);
 
     return (
-      <div key={`attachment-${index}-${contentKey}`} className={classes.inlineAttachmentCard}>
+      <div className={classes.inlineAttachmentCard}>
         {showRemoveButton && (
           <Button
             appearance="transparent"
@@ -85,7 +79,7 @@ const AttachmentsContainer = memo(
       <div className={classes.inlineAttachmentsContainer}>
         {attachments.map((attachment, index) => (
           <AttachmentItem
-            key={index}
+            key={`${attachment.type}-${index}`}
             attachment={attachment}
             index={index}
             onRemove={onRemoveAttachment}

packages/devtools/src/components/Card/AdaptiveCard.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, memo } from 'react';
 import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
 import * as cards from '@microsoft/spark.cards';
 
@@ -21,8 +21,7 @@ const useAdaptiveCardStyles = makeStyles({
   },
 });
 
-export default function AdaptiveCard({ value }: AdaptiveCardProps) {
-  console.log('AC value', value);
+const AdaptiveCard = memo(({ value }: AdaptiveCardProps) => {
   const classes = useAdaptiveCardStyles();
   return (
     <div className={mergeClasses(classes.root)}>
@@ -43,4 +42,7 @@ export default function AdaptiveCard({ value }: AdaptiveCardProps) {
       )}
     </div>
   );
-}
+});
+
+export default AdaptiveCard;
+AdaptiveCard.displayName = 'AdaptiveCard';

packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx

@@ -21,16 +21,19 @@ import {
   MenuTrigger,
   Textarea,
   Toast,
-  ToastBody,
   ToastTitle,
+  useToastController,
   Toolbar,
   ToolbarButton,
   ToolbarProps,
   ToolbarDivider,
   useId,
-  useToastController,
 } from '@fluentui/react-components';
 import { useNavigate } from 'react-router';
+import { Card } from '@microsoft/spark.cards';
+
+import { useCardStore } from '../../../stores/CardStore';
+import Logger from '../../Logger/Logger';
 
 import { useClasses } from './ComposeBoxToolbar.styles';
 
@@ -50,13 +53,15 @@ const ComposeBoxToolbar: FC<ComposeBoxToolbarProps> = ({
 }) => {
   const classes = useClasses();
   const navigate = useNavigate();
-  const { dispatchToast } = useToastController();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [jsonInput, setJsonInput] = useState('');
   const [menuOpen, setMenuOpen] = useState(false);
   const dialogTitleId = useId('dialog-title');
   const textareaId = useId('json-input');
   const jsonInputRef = useRef<HTMLTextAreaElement>(null);
+  const { currentCard } = useCardStore();
+  const { dispatchToast } = useToastController();
+  const childLog = Logger.child('ComposeBoxToolbar');
 
   const handleNavigateToCards = () => {
     navigate('/cards');
@@ -65,41 +70,51 @@ const ComposeBoxToolbar: FC<ComposeBoxToolbarProps> = ({
 
   const handleSaveJson = useCallback(() => {
     try {
-      const card = JSON.parse(jsonInput);
+      const card = JSON.parse(jsonInput) as Card;
 
       if (onAttachment) {
         onAttachment({
           type: 'card',
           content: card,
+          contentType: 'application/vnd.microsoft.card.adaptive',
         });
       } else if (onSend) {
         onSend([
           {
-            contentType: 'application/vnd.microsoft.card.adaptive',
+            type: 'card',
             content: card,
+            contentType: 'application/vnd.microsoft.card.adaptive',
           },
         ]);
       }
 
       setIsDialogOpen(false);
+      setJsonInput('');
     } catch (error) {
+      childLog.debug('Failed to parse JSON:', error);
       dispatchToast(
         <Toast>
-          <ToastTitle>Error</ToastTitle>
-          <ToastBody>
-            Failed to parse JSON: {error instanceof Error ? error.message : String(error)}
-          </ToastBody>
+          <ToastTitle>Failed to parse JSON. Please check your input and try again.</ToastTitle>
         </Toast>,
         { intent: 'error' }
       );
     }
-  }, [jsonInput, onAttachment, onSend, dispatchToast, setIsDialogOpen]);
+  }, [childLog, jsonInput, onAttachment, onSend, dispatchToast]);
 
   const handleSend = useCallback(() => {
-    if (onSend && hasContent) {
-      onSend();
+    if (onSend) {
+      if (currentCard) {
+        onSend([
+          {
+            contentType: 'application/vnd.microsoft.card.adaptive',
+            content: currentCard,
+          },
+        ]);
+      } else if (hasContent) {
+        onSend();
+      }
     }
-  }, [onSend, hasContent]);
+  }, [onSend, hasContent, currentCard]);
 
   return (
     <Toolbar aria-label="New message actions" {...props} className={classes.toolbar}>
@@ -144,7 +159,7 @@ const ComposeBoxToolbar: FC<ComposeBoxToolbarProps> = ({
                 Cancel
               </Button>
               <Button appearance="primary" onClick={handleSaveJson}>
-                Attach Card
+                Attach card
               </Button>
             </DialogActions>
           </DialogBody>

packages/graph/package.json

@@ -25,8 +25,6 @@
   ],
   "scripts": {
     "clean": "npx rimraf ./dist",
-    "lint": "npx eslint",
-    "lint:fix": "npx eslint --fix",
     "build": "npx cross-env NODE_OPTIONS='--max-old-space-size=16384' npx tsup && npx rimraf ./dist/index.d.mts",
     "test": "npx jest",
     "gen": "npm run gen:types && npm run gen:endpoints",