chrome extension

extensions/chrome/_locales/en/messages.json

@@ -0,0 +1,66 @@
+{
+  "l10nTabName": {
+    "message":"Localization"
+    ,"description":"name of the localization tab"
+  }
+  ,"l10nHeader": {
+    "message":"It does localization too! (this whole tab is, actually)"
+    ,"description":"Header text for the localization section"
+  }
+  ,"l10nIntro": {
+    "message":"'L10n' refers to 'Localization' - 'L' an 'n' are obvious, and 10 comes from the number of letters between those two.  It is the process/whatever of displaying something in the language of choice.  It uses 'I18n', 'Internationalization', which refers to the tools / framework supporting L10n.  I.e., something is internationalized if it has I18n support, and can be localized.  Something is localized for you if it is in your language / dialect."
+    ,"description":"introduce the basic idea."
+  }
+  ,"l10nProd": {
+    "message":"You <strong>are</strong> planning to allow localization, right?  You have <em>no idea</em> who will be using your extension!  You have no idea who will be translating it!  At least support the basics, it's not hard, and having the framework in place will let you transition much more easily later on."
+    ,"description":"drive the point home.  It's good for you."
+  }
+  ,"l10nFirstParagraph": {
+    "message":"When the options page loads, elements decorated with <strong>data-l10n</strong> will automatically be localized!"
+    ,"description":"inform that <el data-l10n='' /> elements will be localized on load"
+  }
+  ,"l10nSecondParagraph": {
+    "message":"If you need more complex localization, you can also define <strong>data-l10n-args</strong>.  This should contain <span class='code'>$containerType$</span> filled with <span class='code'>$dataType$</span>, which will be passed into Chrome's i18n API as <span class='code'>$functionArgs$</span>.  In fact, this paragraph does just that, and wraps the args in mono-space font.  Easy!"
+    ,"description":"introduce the data-l10n-args attribute.  End on a lame note."
+    ,"placeholders": {
+      "containerType": {
+        "content":"$1"
+        ,"example":"'array', 'list', or something similar"
+        ,"description":"type of the args container"
+      }
+      ,"dataType": {
+        "content":"$2"
+        ,"example":"string"
+        ,"description":"type of data in each array index"
+      }
+      ,"functionArgs": {
+        "content":"$3"
+        ,"example":"arguments"
+        ,"description":"whatever you call what you pass into a function/method.  args, params, etc."
+      }
+    }
+  }
+  ,"l10nThirdParagraph": {
+    "message":"Message contents are passed right into innerHTML without processing - include any tags (or even scripts) that you feel like.  If you have an input field, the placeholder will be set instead, and buttons will have the value attribute set."
+    ,"description":"inform that we handle placeholders, buttons, and direct HTML input"
+  }
+  ,"l10nButtonsBefore": {
+    "message":"Different types of buttons are handled as well.  &lt;button&gt; elements have their html set:"
+  }
+  ,"l10nButton": {
+    "message":"in a <strong>button</strong>"
+  }
+  ,"l10nButtonsBetween": {
+    "message":"while &lt;input type='submit'&gt; and &lt;input type='button'&gt; get their 'value' set (note: no HTML):"
+  }
+  ,"l10nSubmit": {
+    "message":"a <strong>submit</strong> value"
+  }
+  ,"l10nButtonsAfter": {
+    "message":"Awesome, no?"
+  }
+  ,"l10nExtras": {
+    "message":"You can even set <span class='code'>data-l10n</span> on things like the &lt;title&gt; tag, which lets you have translatable page titles, or fieldset &lt;legend&gt; tags, or anywhere else - the default <span class='code'>Boil.localize()</span> behavior will check every tag in the document, not just the body."
+    ,"description":"inform about places which may not be obvious, like <title>, etc"
+  }
+}

extensions/chrome/js/jquery/.gitignore

@@ -0,0 +1,3 @@
+build
+jquery-migrate.js
+jquery-migrate.min.js

extensions/chrome/js/jquery/README.md

@@ -0,0 +1,4 @@
+jQuery Component
+================
+
+Shim repository for jQuery.

extensions/chrome/js/jquery/bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "jquery",
+  "version": "2.0.0",
+  "description": "jQuery component",
+  "keywords": [
+    "jquery",
+    "component"
+  ],
+  "scripts": [
+    "jquery.js"
+  ],
+  "license": "MIT"
+}

extensions/chrome/js/jquery/component.json

@@ -0,0 +1,21 @@
+{
+  "name": "jquery",
+  "version": "2.0.0",
+  "description": "jQuery component",
+  "keywords": [
+    "jquery",
+    "component"
+  ],
+  "scripts": [
+    "jquery.js"
+  ],
+  "license": "MIT",
+  "gitHead": "46f8412bd1bb9b1b30b5b0eb88560e2d4196509c",
+  "readme": "jQuery Component\n================\n\nShim repository for jQuery.\n",
+  "readmeFilename": "README.md",
+  "_id": "jquery@2.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/components/jquery.git"
+  }
+}

extensions/chrome/js/jquery/composer.json

@@ -0,0 +1,30 @@
+{
+    "name": "components/jquery",
+    "description": "jQuery JavaScript Library",
+    "type": "component",
+    "homepage": "http://jquery.com",
+    "license": "MIT",
+    "support": {
+        "irc": "irc://irc.freenode.org/jquery",
+        "issues": "http://bugs.jquery.com",
+        "forum": "http://forum.jquery.com",
+        "wiki": "http://docs.jquery.com/",
+        "source": "https://github.com/jquery/jquery"
+    },
+    "authors": [
+        {
+            "name": "John Resig",
+            "email": "jeresig@gmail.com"
+        }
+    ],
+    "require": {
+        "robloach/component-installer": "*"
+    },
+    "extra": {
+        "component": {
+            "scripts": [
+                "jquery.js"
+            ]
+        }
+    }
+}

extensions/chrome/js/jquery/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "components-jquery",
+  "version": "2.0.0",
+  "description": "jQuery component",
+  "keywords": ["jquery"],
+  "main": "./jquery.js"
+}

extensions/chrome/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "Documenation AI butler",
+  "version": "0.0.1",
+  "manifest_version": 2,
+  "description": "AI assistant for developers, that helps you answer your questions about the documentation you are reading.",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "default_locale": "en",
+  "background": {
+    "page": "src/bg/background.html",
+    "persistent": true
+  },
+  "permissions": ["activeTab", "storage"],
+  "browser_action": {
+    "default_popup": "popup.html"
+}
+
+}

extensions/chrome/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "tailwindcss": "^3.2.4"
+  }
+}

extensions/chrome/popup.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chat Extension</title>
+    <link href="/dist/output.css" rel="stylesheet">
+    <!-- <link rel="stylesheet" href="styles.css"> -->
+
+
+
+  </head>
+  <body>
+    <header class="bg-white p-2 flex justify-between items-center">
+      <h1 class="text-lg font-medium">DocsGPT</h1>
+      <a href="#about" class="text-blue-500 hover:text-blue-800">About</a>
+    </header>
+        <div class="w-full flex flex-col">
+          <div id="chat-container">
+            
+            <div id="messages" class="w-full flex flex-col">
+              <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
+                <p class="text-sm">Hello, ask me anything about this library. Im here to help</p>
+              </div>
+              <div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end">
+                <p class="text-sm">How to create API key for Api gateway?</p>
+              </div>
+              <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
+                <p class="text-sm">Import the boto3 library and create a client for the API Gateway service:</p>
+                
+
+              </div>
+              <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
+                <code class="text-sm">client = boto3.client('apigateway')</code> 
+                
+
+              </div>
+              <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
+                <p class="text-sm">Create an API key:</p>
+                
+              </div>
+              <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
+                <code class="text-sm">response = client.create_api_key(<br>name='API_KEY_NAME',<br>description='API key description',<br>enabled=True)<br>api_key = response['value']</code>
+
+              </div>
+          </div>
+        </div>
+        <div class=" flex mt-4 mb-2">
+        <form id="message-form">
+          <input id="message-input" class="bg-white p-2 rounded-lg ml-2 w-[26rem]" type="text" placeholder="Type your message here...">
+          <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
+        </form>
+        </div>
+
+    </div>
+    <script src="popup.js"></script>
+  </body>
+</html>

extensions/chrome/popup.js

@@ -0,0 +1,46 @@
+document.getElementById("message-form").addEventListener("submit", function(event) {
+    event.preventDefault();
+    var message = document.getElementById("message-input").value;
+    chrome.runtime.sendMessage({msg: "sendMessage", message: message}, function(response) {
+      console.log(response.response);
+      msg_html = '<div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
+      msg_html += message
+      msg_html += '</p></div>'
+      document.getElementById("messages").innerHTML += msg_html;
+      let chatWindow = document.getElementById("chat-container");
+      chatWindow.scrollTop = chatWindow.scrollHeight;
+
+    });
+
+    document.getElementById("message-input").value = "";
+    var converstation_state = localStorage.getItem("conversation_state");
+    // check if conversation state is null
+    if (converstation_state == null) {
+      converstation_state = 0;
+      localStorage.setItem("conversation_state", converstation_state);
+    }
+
+    // send post request to server http://127.0.0.1:5000/ with message in json body
+    fetch('http://127.0.0.1:5000/api/answer', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({question: message}),
+    })
+    .then(response => response.json())
+    .then(data => {
+      console.log('Success:', data);
+
+        
+        msg_html = '<div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start"><code class="text-sm">'
+        msg_html += data.answer
+        msg_html += '</code></div>'
+        document.getElementById("messages").innerHTML += msg_html;
+        let chatWindow = document.getElementById("chat-container");
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+    })
+
+
+  });
+  

extensions/chrome/src/bg/background.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="text/javascript" src="background.js"></script>
+</head>
+</html>

extensions/chrome/src/bg/background.js

@@ -0,0 +1,22 @@
+// if you checked "fancy-settings" in extensionizr.com, uncomment this lines
+
+// var settings = new Store("settings", {
+//     "sample_setting": "This is how you use Store.js to remember values"
+// });
+
+
+//example of using a message handler from the inject scripts
+chrome.extension.onMessage.addListener(
+  function(request, sender, sendResponse) {
+  	chrome.pageAction.show(sender.tab.id);
+    sendResponse();
+  });
+
+
+  chrome.runtime.onMessage.addListener(
+    function(request, sender, sendResponse) {
+      if (request.msg === "sendMessage") {
+        sendResponse({response: "Message received"});
+      }
+    });
+  

extensions/chrome/styles.css

@@ -0,0 +1,45 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+#chat-container {
+    width: 500px;
+    height: 450px;
+    background-color: white;
+    padding: 10px;
+    overflow: auto;
+}
+
+
+
+.bg-gray-200 {
+    background-color: #edf2f7;
+  }
+  
+  .bg-gray-900 {
+    background-color: #1a202c;
+  }
+  
+  .rounded-lg {
+    border-radius: 0.5rem;
+  }
+  
+  .shadow {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  }
+  
+  .text-gray-700 {
+    color: #4a5568;
+  }
+  
+  .text-sm {
+    font-size: 0.875rem;
+  }
+  
+  .p-4 {
+    padding: 1.5rem;
+  }
+  
+
+

extensions/chrome/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    content: ["./src/**/*.{html,js}", "./*.{html,js,css}"],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }