Update the manifest.xml and add the summary function

manifest.xml

@@ -2,15 +2,15 @@
 <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
   <Id>eb774e01-2b8b-4518-8a0b-0475615abdd0</Id>
   <Version>1.0.0.0</Version>
-  <ProviderName>OutlookLLM Rizlum</ProviderName>
+  <ProviderName>OutlookLLM RizLum</ProviderName>
   <DefaultLocale>en-US</DefaultLocale>
   <DisplayName DefaultValue="OutlookLLM"/>
   <Description DefaultValue="Add-in for new Outlook that adds Generative AI features (Composition, Summarizing)"/>
-  <IconUrl DefaultValue="http://localhost:3000/assets/icon-64.png"/>
+  <IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
-  <HighResolutionIconUrl DefaultValue="http://localhost:3000/assets/icon-128.png"/>
+  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-128.png"/>
   <SupportUrl DefaultValue="https://www.certeza.ai/help"/>
   <AppDomains>
-    <AppDomain>http://localhost</AppDomain>
+    <AppDomain>https://localhost</AppDomain>
   </AppDomains>
   <Hosts>
     <Host Name="Mailbox"/>
@@ -23,7 +23,7 @@
   <FormSettings>
     <Form xsi:type="ItemRead">
       <DesktopSettings>
-        <SourceLocation DefaultValue="http://localhost:3000/taskpane.html"/>
+        <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
         <RequestedHeight>250</RequestedHeight>
       </DesktopSettings>
     </Form>
@@ -95,14 +95,14 @@
       </Hosts>
       <Resources>
         <bt:Images>
-          <bt:Image id="Icon.16x16" DefaultValue="http://localhost:3000/assets/icon-16.png"/>
+          <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
-          <bt:Image id="Icon.32x32" DefaultValue="http://localhost:3000/assets/icon-32.png"/>
+          <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
-          <bt:Image id="Icon.80x80" DefaultValue="http://localhost:3000/assets/icon-80.png"/>
+          <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
         </bt:Images>
         <bt:Urls>
-          <bt:Url id="Commands.Url" DefaultValue="http://localhost:3000/commands.html"/>
+          <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
-          <bt:Url id="Taskpane.Url" DefaultValue="http://localhost:3000/taskpane.html"/>
+          <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
-          <bt:Url id="Summarizepane.Url" DefaultValue="http://localhost:3000/summarizepane.html"/>
+          <bt:Url id="Summarizepane.Url" DefaultValue="https://localhost:3000/summarizepane.html"/>
         </bt:Urls>
         <bt:ShortStrings>
           <bt:String id="GroupLabel" DefaultValue="OutlookLLM"/>

src/summarizepane/components/TextInsertion.jsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 import { Button, Field, Title3, Checkbox, Textarea, Text, Spinner, tokens, makeStyles} from "@fluentui/react-components";
+import { TextField } from "@fluentui/react";
 import { insertText } from "../outlook";
 import Taskpane from "../taskpane";
 
@@ -42,52 +43,57 @@ const useStyles = makeStyles({
 });
 
 const TextInsertion = () => {
-  const [text, setText] = useState("Write an email to make a meeting with client");
   const [showSpinner, setshowSpinner] = useState(false);
-  const [writeSubject, setWriteSubject] = useState(false);
+  const [emailsummary, setEmailsummary] = useState("");
 
+  const getEmailContent = () =>
+    new Promise((resolve, reject) => {
+      Office.context.mailbox.item.body.getAsync(Office.CoercionType.Text, (result) => {
+        if (result.status === Office.AsyncResultStatus.Succeeded) {
+          resolve(result.value);
+        } else {
+          reject(result.error.message);
+        }
+      });
+    });
 
   const handleTextInsertion = async () => {
     try {
-      
       setshowSpinner(true);
+      const emailContent = await getEmailContent();
+      console.log(emailContent);
+      // Summarize email content with AI
+      const res = 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 the content of the following email body: ' + emailContent,
+            },
+          ],
+        }),
+      });
       
-      // const response = await fetch("http://localhost:11434/api/generate", {
+      if (!res.ok) {
-      //   method: "POST",
+          throw new Error(`HTTP error! status: ${res.status}`);
-      //   headers: {
+      }
-      //     "Content-Type": "application/json",
-      //   },
-      //   body: JSON.stringify({
-      //     model: "llama3.2",
-      //     prompt: text,
-      //   })
-      // });
-      const response = "Hello World, we are Rizlum";
-      console.log(response);
-
-      // if (!response.ok) {
-      //   throw new Error("Network response was not ok");
-      // }
-
-      // Handle success response if needed
-      console.log('Data sent successfully');
-    
-      //const textContent = await response.json();
-      const textContent = "Insert this magic text from Riz Lum :D";
-      //await insertText(textContent, writeSubject);
-      await insertText(textContent);
-      setshowSpinner(false);
           
+      const data = await res.json();
+      console.log(data);
+      const textContent = data.choices[0].message.content;
+      setEmailsummary(textContent);
     } catch (error) {
+            console.error('Error fetching data:', error);
+          }
+  
       setshowSpinner(false);
-      console.error('Error sending data:',error);
-    }
     
-    
-  };
-
-  const handleTextChange = async (event) => {
-    setText(event.target.value);
   };
 
   const styles = useStyles();
@@ -103,13 +109,29 @@ const TextInsertion = () => {
         {showSpinner && (
           <Spinner  id="spinner" appearance="inverted"/>
         )} 
-        {showSpinner ? '   Generating email...' : 'Summarize with AI'}
+        {showSpinner ? '   Summarizing email...' : 'Summarize with AI'}
       </Button>
       {/* <TextField value={response} multiline rows={10} disabled /> */}
-      {!showSpinner && (
+      {emailsummary && (
         <div>
-          <Taskpane />
+        <TextField value={emailsummary} multiline rows={15} disabled 
-        </div>
+        appearance="filledLighter" // Applies a modern, softer look
+        style={{
+          width: "120%", // Makes the TextField responsive
+          maxWidth: "800px", // Limits width for better readability
+          height: "300px", 
+          backgroundColor: "#f9fafa", // Light background for a clean look
+          color: "#1a1a1a", // Dark text for high contrast
+          fontSize: "16px", // 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

@@ -65,7 +65,7 @@ const TextInsertion = () => {
           messages: [
             {
               role: 'user',
-              content: text,
+              content: 'write the email body without subject email with the following content: ' + text,
             },
           ],
         }),