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

Update prompt & add beginning of quick response

Browse Source
This commit is contained in:
Trinh Ngoc Tu 2024-12-09 23:07:23 +01:00
parent 3dacbbea03
commit 1d9584f71f
4 changed files with 151 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/summarizepane/components/App.jsx
View File

@ -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>
);
};

135
src/summarizepane/components/QuickResponse.jsx Normal file
View File

@ -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;

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

@ -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
height: "150px",
maxWidth: "800px", // Limits width for better readability
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}>
<Button appearance="primary" disabled={false} size="large" onClick={handleSummaryLong} style={{ marginBottom: '20px' }}>
{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
maxWidth: "1000px", // Limits width for better readability
height: "300px",
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

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

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