Update prompt & add beginning of quick response

src/summarizepane/components/App.jsx

@@ -5,6 +5,7 @@ import HeroList from "./HeroList";
 import TextInsertion from "./TextInsertion";
 import { makeStyles } from "@fluentui/react-components";
 import { Ribbon24Regular, LockOpen24Regular, DesignIdeas24Regular } from "@fluentui/react-icons";
+import QuickResponse from "./QuickResponse";
 
 const useStyles = makeStyles({
   root: {
@@ -18,6 +19,7 @@ const App = (props) => {
   return (
     <div className={styles.root}>
       <TextInsertion />
+      <QuickResponse />
     </div>
   );
 };

src/summarizepane/components/QuickResponse.jsx

@@ -0,0 +1,135 @@
+/* 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";
+import { TextField } from "@fluentui/react";
+
+const useStyles = makeStyles({
+  
+  textPromptAndInsertion: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  },
+
+  textField: {
+    marginLeft: "15px",
+    marginTop: "30px",
+    marginRight: "15px",
+    
+  },
+
+  textAreaField: {
+    marginLeft: "15px",
+    marginTop: "10px",
+    
+    marginRight: "15px",
+    minHeight: "150px",
+  },
+
+  textCheck: {
+    marginTop: "10px",
+    marginLeft: "15px",
+    marginRight: "15px",
+    
+  },
+
+  checkStyle: {
+    marginBottom: "15px",
+  }
+  
+});
+
+const QuickResponse = () => {
+  const [showSpinnerdetails, setshowSpinnerdetails] = useState(false);
+  const [emailresponse, setEmailresponse] = 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 handleQuickResponse = async () => {
+    try {
+      setshowSpinnerdetails(true);
+      const emailContent_detail = await getEmailContent();
+      console.log(emailContent_detail);
+      // Propose a quick responsee 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: "system", content: "You are an email assistant." },
+              {role: 'user',
+              content: 'Generate two possible quick response emails for the following email body: ' + emailContent_detail + '. Each response email is numbered and have a short subject and detailed content, not other things.'},
+          ],
+        }),
+      });
+      
+      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;
+      setEmailresponse(textContentdetail);
+    } catch (error) {
+            console.error('Error fetching data:', error);
+          }
+  
+      setshowSpinnerdetails(false);
+    
+  };
+
+  const styles = useStyles();
+
+  return (
+    <div className={styles.textPromptAndInsertion}>
+      <Button appearance="primary" disabled={false} size="large" onClick={handleQuickResponse} style={{ marginBottom: '16px' }}>
+          {showSpinnerdetails && (
+            <Spinner  id="spinner" appearance="inverted"/>
+          )} 
+          {showSpinnerdetails ? 'Generating quick response email ...' : 'Quick response email '}
+      </Button>
+      {emailresponse && (
+        <div>
+        <TextField value={emailresponse} multiline rows={15} disabled 
+        size={30}
+        appearance="filledLighter" // Applies a modern, softer look
+        style={{
+          width: "100%", // Makes the TextField responsive
+          maxWidth: "1200px", // Limits width for better readability
+          height: "200px", 
+          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>
+  );
+};
+
+export default QuickResponse;

src/summarizepane/components/TextInsertion.jsx

@@ -77,9 +77,10 @@ const TextInsertion = () => {
         body: JSON.stringify({
           model: 'riz-text',
           messages: [
+            { role: "system", content: "You are an email assistant." },
             {
               role: 'user',
-              content: 'Summarize briefly less than 50 words the content of the following email body: ' + emailContent,
+              content: 'Summarize briefly less than 40 words the content of the following email body: ' + emailContent,
             },
           ],
         }),
@@ -116,9 +117,10 @@ const TextInsertion = () => {
         body: JSON.stringify({
           model: 'riz-text',
           messages: [
+            { role: "system", content: "You are an email assistant." },
             {
               role: 'user',
-              content: 'Summarize in detail the content of the following email body: ' + emailContent_detail,
+              content: 'Summarize in detail less than 200 words the content of the following email body: ' + emailContent_detail,
             },
           ],
         }),
@@ -145,7 +147,7 @@ const TextInsertion = () => {
   return (
     <div className={styles.textPromptAndInsertion}>
       <Title3>Summarize with AI</Title3>
-      <Button appearance="primary" disabled={false} size="large" onClick={handleTextInsertion}>
+      <Button appearance="primary" disabled={false} size="large" onClick={handleTextInsertion} style={{ marginBottom: '16px' }}>
         {showSpinner && (
           <Spinner  id="spinner" appearance="inverted"/>
         )} 
@@ -158,8 +160,8 @@ const TextInsertion = () => {
         appearance="filledLighter" // Applies a modern, softer look
         style={{
           width: "100%", // Makes the TextField responsive
-          maxWidth: "600px", // Limits width for better readability
+          maxWidth: "800px", // Limits width for better readability
-          height: "150px", 
+          height: "100px", 
           backgroundColor: "#f9fafa", // Light background for a clean look
           color: "#1a1a1a", // Dark text for high contrast
           fontSize: "16px", // Improves text readability
@@ -173,22 +175,21 @@ const TextInsertion = () => {
         }} />
       </div>
       )}
-      <div> 
+      <Button appearance="primary" disabled={false} size="large" onClick={handleSummaryLong} style={{ marginBottom: '20px' }}>
-        <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 
+        size={30}
         appearance="filledLighter" // Applies a modern, softer look
         style={{
-          width: "200%", // Makes the TextField responsive
+          width: "100%", // Makes the TextField responsive
-          maxWidth: "1000px", // Limits width for better readability
+          maxWidth: "1200px", // Limits width for better readability
-          height: "300px", 
+          height: "200px", 
           backgroundColor: "#f9fafa", // Light background for a clean look
           color: "#1a1a1a", // Dark text for high contrast
           fontSize: "14px", // Improves text readability

src/taskpane/components/TextInsertion.jsx

@@ -64,9 +64,10 @@ const TextInsertion = () => {
         body: JSON.stringify({
           model: 'riz-text',
           messages: [
+            { role: "system", content: "You are an email assistant." },
             {
               role: 'user',
-              content: 'write the email body without subject email, and having line spaces with the following content: ' + text,
+              content: 'Write an email content without subject with the following content: ' + text,
             },
           ],
         }),