Divide into summarize briefly and summarize in detail for summarize feature

src/summarizepane/components/TextInsertion.jsx

@@ -1,3 +1,6 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable prettier/prettier */
 import * as React from "react";
 import { useState } from "react";
 import { Button, Field, Title3, Checkbox, Textarea, Text, Spinner, tokens, makeStyles} from "@fluentui/react-components";
@@ -44,7 +47,9 @@ const useStyles = makeStyles({
 
 const TextInsertion = () => {
   const [showSpinner, setshowSpinner] = useState(false);
+  const [showSpinnerdetails, setshowSpinnerdetails] = useState(false);
   const [emailsummary, setEmailsummary] = useState("");
+  const [emailsummarydetails, setEmailsummarydetails] = useState("");
 
   const getEmailContent = () =>
     new Promise((resolve, reject) => {
@@ -74,7 +79,7 @@ const TextInsertion = () => {
           messages: [
             {
               role: 'user',
-              content: 'Summarize the content of the following email body: ' + emailContent,
+              content: 'Summarize briefly less than 50 words the content of the following email body: ' + emailContent,
             },
           ],
         }),
@@ -96,15 +101,50 @@ const TextInsertion = () => {
     
   };
 
+  const handleSummaryLong = async () => {
+    try {
+      setshowSpinnerdetails(true);
+      const emailContent_detail = await getEmailContent();
+      console.log(emailContent_detail);
+      // Summarize email content in details with AI
+      const res_detail = await fetch('https://ai.rizlum.com/chat/completions', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer sk-xo6s1sEAjUJupYAj7kjaZqRm6D3QgpYbS',
+        },
+        body: JSON.stringify({
+          model: 'riz-text',
+          messages: [
+            {
+              role: 'user',
+              content: 'Summarize in detail the content of the following email body: ' + emailContent_detail,
+            },
+          ],
+        }),
+      });
+      
+      if (!res_detail.ok) {
+          throw new Error(`HTTP error! status: ${res_detail.status}`);
+      }
+        
+      const data_detail = await res_detail.json();
+      console.log(data_detail);
+      const textContentdetail = data_detail.choices[0].message.content;
+      setEmailsummarydetails(textContentdetail);
+    } catch (error) {
+            console.error('Error fetching data:', error);
+          }
+  
+      setshowSpinnerdetails(false);
+    
+  };
+
   const styles = useStyles();
 
   return (
     <div className={styles.textPromptAndInsertion}>
       <Title3>Summarize with AI</Title3>
-      <Text className={styles.textField} size="medium" >Generate your read email by AI.</Text>
-      
-      {/* <Text className={styles.textCheck} size="medium" >3. Check if you want also AI to generate the email subject.</Text>
-      <Checkbox className={styles.checkStyle}  label="Generate Email Subject" onChange={(ev, data) => setWriteSubject(data.checked)} value={writeSubject}/> */}
       <Button appearance="primary" disabled={false} size="large" onClick={handleTextInsertion}>
         {showSpinner && (
           <Spinner  id="spinner" appearance="inverted"/>
@@ -114,12 +154,12 @@ const TextInsertion = () => {
       {/* <TextField value={response} multiline rows={10} disabled /> */}
       {emailsummary && (
         <div>
-        <TextField value={emailsummary} multiline rows={15} disabled 
+        <TextField value={emailsummary} multiline rows={8} disabled 
         appearance="filledLighter" // Applies a modern, softer look
         style={{
-          width: "120%", // Makes the TextField responsive
+          width: "100%", // Makes the TextField responsive
-          maxWidth: "800px", // Limits width for better readability
+          maxWidth: "600px", // Limits width for better readability
-          height: "300px", 
+          height: "150px", 
           backgroundColor: "#f9fafa", // Light background for a clean look
           color: "#1a1a1a", // Dark text for high contrast
           fontSize: "16px", // Improves text readability
@@ -133,6 +173,35 @@ const TextInsertion = () => {
         }} />
       </div>
       )}
+      <div> 
+        <Button appearance="primary" disabled={false} size="large" onClick={handleSummaryLong}>
+          {showSpinnerdetails && (
+            <Spinner  id="spinner" appearance="inverted"/>
+          )} 
+          {showSpinnerdetails ? '   Summarizing email in detail ...' : 'Summarize in detail with AI'}
+      </Button>
+      </div>
+      {emailsummarydetails && (
+        <div>
+        <TextField value={emailsummarydetails} multiline rows={15} disabled 
+        appearance="filledLighter" // Applies a modern, softer look
+        style={{
+          width: "200%", // Makes the TextField responsive
+          maxWidth: "1000px", // Limits width for better readability
+          height: "300px", 
+          backgroundColor: "#f9fafa", // Light background for a clean look
+          color: "#1a1a1a", // Dark text for high contrast
+          fontSize: "14px", // Improves text readability
+          fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif", // Uses a modern font
+          lineHeight: "1.5", // Adds spacing for multiline content
+          padding: "12px", // Adds internal spacing for a spacious feel
+          borderRadius: "8px", // Smooth rounded corners
+          border: "1px solid #e1e4e8", // Subtle border for a clean outline
+          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)", // Adds a soft shadow for depth
+          overflowY: "auto", // Ensures content is scrollable if it exceeds height
+        }} />
+      </div>
+      )}  
     </div>
   );
 };

src/taskpane/components/TextInsertion.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import * as React from "react";
 import { useState } from "react";
 import { Button, Field, Title3, Checkbox, Textarea, Text, Spinner, tokens, makeStyles } from "@fluentui/react-components";
@@ -65,7 +66,7 @@ const TextInsertion = () => {
           messages: [
             {
               role: 'user',
-              content: 'write the email body without subject email with the following content: ' + text,
+              content: 'write the email body without subject email, and having line spaces with the following content: ' + text,
             },
           ],
         }),