extension/script.js at main · Information-Detrieval/extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const msgerForm = get(".msger-inputarea");
const msgerInput = get(".msger-input");
const msgerChat = get(".msger-chat");


// Icons made by Freepik from www.flaticon.com
const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
const BOT_NAME = "Detrieval";
const PERSON_NAME = "You";

const conversation = []
msgerForm.addEventListener("submit", event => {
  event.preventDefault();

  const msgText = msgerInput.value;
  if (!msgText) return;

  appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
  msgerInput.value = "";

  // Send POST request to the backend
  fetch('http://127.0.0.1:8000/run_query', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query_str: msgText,
      convo: conversation.slice(Math.max(0,conversation.length-4), 4).join('\n')
    })
  })
  .then(response => response.json())
  .then(data => {
    appendMessage(BOT_NAME, BOT_IMG, "left", data['data'])
    conversation.push(`User: ${msgText}`)
    // conversation.push(`Bot: ${data['data']}`)
  })
  .catch((error) => {
    console.error('Error:', error);
  });

});

function appendMessage(name, img, side, text) {
  //   Simple solution for small apps
  const msgHTML = `
    <div class="msg ${side}-msg">
<!--      <div class="msg-img" style="background-image: url(${img})"></div>-->

      <div class="msg-bubble">
        <div class="msg-info">
          <div class="msg-info-name">${name}</div>
          <div class="msg-info-time">${formatDate(new Date())}</div>
        </div>

        <div class="msg-text">${text}</div>
      </div>
    </div>
  `;

  msgerChat.insertAdjacentHTML("beforeend", msgHTML);
  msgerChat.scrollTop += 500;
}

// Utils
function get(selector, root = document) {
  return root.querySelector(selector);
}

function formatDate(date) {
  const h = "0" + date.getHours();
  const m = "0" + date.getMinutes();

  return `${h.slice(-2)}:${m.slice(-2)}`;
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

// (async () => {
//   // see the note below on how to choose currentWindow or lastFocusedWindow
//   const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
//   fetch('http://127.0.0.1:8000/scrape_websites', {
//     method: 'POST',
//     headers: {
//       'Content-Type': 'application/json'
//     },
//     body: JSON.stringify({ websites: [tab.url] })
//   }).then(()=>{
//     console.log('Scraping done for ', tab.url);
//   })
//   const tabs = await chrome.tabs.query({currentWindow: true});
//
//   console.log("All URLs in current window: ", tabs.map(tab => tab.url))
//   // console.log("Not currently sending all URLs due to resource constraints")
// })();