Tu/Outlook_Addin_LLM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Divide into summarize briefly and summarize in detail for summarize feature

Browse Source
This commit is contained in:
Trinh Ngoc Tu 2024-12-06 11:16:15 +01:00
parent d38589aeec
commit 3dacbbea03
2 changed files with 81 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/summarizepane/components/TextInsertion.jsx
View File

@ -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,
},
],
}),
@ -83,7 +88,7 @@ const TextInsertion = () => {
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();
console.log(data);
const textContent = data.choices[0].message.content;
@ -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
maxWidth: "800px", // Limits width for better readability
height: "300px",
width: "100%", // Makes the TextField responsive
maxWidth: "600px", // Limits width for better readability
height: "150px",
backgroundColor: "#f9fafa", // Light background for a clean look
color: "#1a1a1a", // Dark text for high contrast
fontSize: "16px", // Improves text readability
@ -132,6 +172,35 @@ const TextInsertion = () => {
overflowY: "auto", // Ensures content is scrollable if it exceeds height
}} />
</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>
);

3
src/taskpane/components/TextInsertion.jsx
View File

@ -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,
},
],
}),