Outlook Plugin for RAG application

Outlook_Email_Draft.yaml

name: Draft Email Reply - last known good - needs issue with localhost cert resolved
description: Auto Drafts and email reply for human review before sending
host: OUTLOOK
api_set: {}
script:
  content: >-
    //////////////////////////////////////////////////////////////////////////////////////

    //

    // Outlook Plugin to automatically draft emails, leveraging your business
    knowledge

    //

    // Front end expects to be able to contact server - see main project at

    // https://github.com/paulbrowne-irl/knowledgebase-elastic-rag

    //

    //////////////////////////////////////////////////////////////////////////////////////


    // Setup button Click handler

    $("#display-reply-all-form-async").on("click", getDraftEmailFromLLM);


    var default_response =
      "For some reason we don't have suggestion for you. <b>Help!</b> or maybe just look at the console / logs.";

    function getDraftEmailFromLLM() {
      // We need to start by doing the "reply all" since Outlook / Office.JS only lets get text
      // in compose rather than read mode
      Office.context.mailbox.item.displayReplyAllFormAsync(default_response, function(asyncResult) {
        console.log(JSON.stringify(asyncResult));

        //call next function when returned
        getMailText();
      });
    }


    // Function get text of the "reply all" we just did

    function getMailText() {
      let body = "";

      Office.context.mailbox.item.body.getAsync("text", function(result) {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
          body = result.value;
          callLLM(body);
        }
      });
    }


    // Call the LLM using the body

    async function callLLM(body) {
      const start_point = Number($("#start-extract").val());
      const end_point = Number($("#end-extract").val());

      var length = start_point + end_point;

      // trimming length length
      var trimmedString = body.length > length ? body.substring(0, length - 3) + "..." : body;

      console.log("Calling API using trimmed Body to:" + length);
      console.log(trimmedString);

      // Call API to get our suggested email

      // const send_body = {
      //   email: "some question I want to ask"
      // };
      
      // $.post("http://localhost:8000/draft_email_response/", send_body, (data, status) => {
      //   console.log("Response returned!");
      //   console.log(data);
      // });

      // Generate the URL encoding our request
      var endpoint = "https://127.0.0.1:8000/draft_email_response"
      var params = {
        email: trimmedString
      }

      var gen_url = endpoint + formatParams(params)
      console.log("About to call:   " + gen_url)
      try {
        //const response = await fetch(gen_url, { timeout: 10000 });

        const controller = new AbortController();
        setTimeout(() => controller.abort(), 15000);

        const response = await fetch(gen_url, { signal: controller.signal });

        if (!response.ok) {
          throw new Error(`Response status: ${response.status}`);
        }

        const json = await response.json();
        console.log(json);

      } catch (error) {
        console.error(error/*.message*/);
      }

    }


    function logResult() {
      console.log("some success or failure");
    }


    // formats the params into a GET request strin

    function formatParams(params) {
      return "?" + Object
        .keys(params)
        .map(function (key) {
          return key + "=" + encodeURIComponent(params[key])
        })
        .join("&")
    }
  language: typescript
template:
  content: "<section class=\"ms-Fabric ms-font-m\">\n\t<p>Draft a sample response using AI, and the set of business knowledge that you have collated. More info at <a href =\"https://github.com/paulbrowne-irl/knowledgebase-elastic-rag\">the project home page</a></p>\n\t<p>Make sure you have the original email open on the left (i.e. you have not started your reply yet.</p>\n</section>\n\n<section class=\"ms-Fabric samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<ul>\n\t\t<li>Generate a Reply using the origianl email.</li>\n\t\t<br>\n\t\t<li>Enter the start and end of the text that will be sent to the LLM </li>\n\t</ul>\n\t<div class=\"ms-TextField\">\n\t\t<input id=\"start-extract\" type=\"number\" class=\"ms-TextField-field\" value=\"100\">\n\t\t<input id=\"end-extract\" type=\"number\" class=\"ms-TextField-field\" value=\"1000\">\n\t  </div>\n\t\t<br>\n\n\t\t<!--\n\t<button id=\"display-reply-form\" class=\"ms-Button\">\n       <div class=\"ms-Button-label\">Display reply form</div>\n  </button>\n\t<button id=\"display-reply-form-async\" class=\"ms-Button\">\n            <div class=\"ms-Button-label\">Display reply form (async)</div>\n    </button>\n\t<p />\n\t<button id=\"display-reply-all-form\" class=\"ms-Button\">\n        <div class=\"ms-Button-label\">Display reply-all form</div>\n  </button>\n  -->\n\t\t<button id=\"display-reply-all-form-async\" class=\"ms-Button\">\n                <div class=\"ms-Button-label\">Draft Reply using AI and Business Knowledge Base</div>\n    </button>\n</section>"
  language: html
style:
  content: |
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
  @types/office-js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]