From ad8aecba016abd74f45558a92be80746b4c66b80 Mon Sep 17 00:00:00 2001
From: Corina Gum <>
Date: Tue, 11 Mar 2025 18:19:45 -0700
Subject: [PATCH 1/3] Fixed pasted JSON card render

---
 .../AttachmentsContainer.tsx                  | 16 ++-----
 .../src/components/Card/AdaptiveCard.tsx      | 10 ++--
 .../ComposeBoxToolbar/ComposeBoxToolbar.tsx   | 46 ++++++++++++-------
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/packages/devtools/src/components/AttachmentsContainer/AttachmentsContainer.tsx b/packages/devtools/src/components/AttachmentsContainer/AttachmentsContainer.tsx
index e90ce203..dcdecee4 100644
--- a/packages/devtools/src/components/AttachmentsContainer/AttachmentsContainer.tsx
+++ b/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}
diff --git a/packages/devtools/src/components/Card/AdaptiveCard.tsx b/packages/devtools/src/components/Card/AdaptiveCard.tsx
index 44315e0b..122ba1da 100644
--- a/packages/devtools/src/components/Card/AdaptiveCard.tsx
+++ b/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';
diff --git a/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx b/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx
index 383106a8..50708b52 100644
--- a/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx
+++ b/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx
@@ -21,18 +21,20 @@ import {
   MenuTrigger,
   Textarea,
   Toast,
-  ToastBody,
   ToastTitle,
+  useToastController,
   Toolbar,
   ToolbarButton,
   ToolbarDivider,
+  ToolbarProps,
   useId,
-  useToastController,
 } from '@fluentui/react-components';
-import type { ToolbarProps } 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';
-import { useNavigate } from 'react-router';
 
 interface ComposeBoxToolbarProps extends ToolbarProps {
   onSend?: (attachments?: any[]) => void;
@@ -50,13 +52,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 +69,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 +158,7 @@ const ComposeBoxToolbar: FC<ComposeBoxToolbarProps> = ({
                 Cancel
               </Button>
               <Button appearance="primary" onClick={handleSaveJson}>
-                Attach Card
+                Attach card
               </Button>
             </DialogActions>
           </DialogBody>

From a14e9e6c2111fea0c6bea39ec09c5e27e7a57453 Mon Sep 17 00:00:00 2001
From: Alex Acebo <aacebowork@gmail.com>
Date: Wed, 12 Mar 2025 07:20:56 -0700
Subject: [PATCH 2/3] Update ComposeBoxToolbar.tsx

---
 .../ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx b/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx
index 2e9209ab..bd2cd92d 100644
--- a/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx
+++ b/packages/devtools/src/components/ComposeBox/ComposeBoxToolbar/ComposeBoxToolbar.tsx
@@ -27,7 +27,6 @@ import {
   ToolbarButton,
   ToolbarProps,
   ToolbarDivider,
-  ToolbarProps,
   useId,
 } from '@fluentui/react-components';
 import { useNavigate } from 'react-router';

From 5666d1833b172c15fb43a2213df08fada846736f Mon Sep 17 00:00:00 2001
From: Alex Acebo <aacebowork@gmail.com>
Date: Wed, 12 Mar 2025 07:28:53 -0700
Subject: [PATCH 3/3] Update package.json

---
 packages/graph/package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/graph/package.json b/packages/graph/package.json
index 4a7ac076..48e14fa0 100644
--- a/packages/graph/package.json
+++ b/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",