changes for OriginTrail

src/components/chat/chat.svelte

@@ -2,152 +2,19 @@
   import { writable } from 'svelte/store';
   import axios from 'axios';
 
-  const jsonData = {
-  "OtherCompanies": [
-    {
-      "@context": "http://schema.org/",
-      "@type": "Organization",
-      "@id": "http://example.org/companies/BrightFutures",
-      "name": "Bright Futures Ltd.",
-      "industry": "wind energy",
-      "investor": {"@id": "http://example.org/investors/PioneerInvestments"},
-      "foundedYear": 2008,
-      "location": "Hamburg, Germany"
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Organization",
-      "@id": "http://example.org/companies/SunPowerTech",
-      "name": "Sun Power Technologies",
-      "industry": "photovoltaic energy",
-      "investor": {"@id": "http://example.org/investors/NatureCapital"},
-      "foundedYear": 2011,
-      "location": "Zurich, Switzerland"
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Organization",
-      "@id": "http://example.org/companies/WaveEnergySolutions",
-      "name": "Wave Energy Solutions",
-      "industry": "tidal energy",
-      "investor": {"@id": "http://example.org/investors/InnovativeFunds"},
-      "foundedYear": 2014,
-      "location": "Dublin, Ireland"
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Organization",
-      "@id": "http://example.org/companies/CleanTech",
-      "name": "Clean Tech Innovations",
-      "industry": "biomass energy",
-      "products": [
-        {"@id": "http://example.org/products/EcoFriendlyGadget1"},
-        {"@id": "http://example.org/products/SustainableWidget1"}
-      ],
-      "impactScore": 90,
-      "issuedBy": {"@id": "http://example.org/certifiers/EcoCertGlobal"},
-      "investor": {"@id": "http://example.org/investors/GreenFunding"},
-      "foundedYear": 2009,
-      "location": "Vienna, Austria"
-    }
-  ],
-  "Investors": [
-    {
-      "@context": "http://schema.org/",
-      "@type": "Person",
-      "@id": "http://example.org/investors/PioneerInvestments",
-      "name": "Pioneer Investments",
-      "investedIn": [
-        {"@id": "http://example.org/companies/BrightFutures"},
-        {"@id": "http://example.org/companies/CleanTech"}
-      ],
-      "location": "London, UK"
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Person",
-      "@id": "http://example.org/investors/NatureCapital",
-      "name": "Nature Capital Group",
-      "investedIn": [
-        {"@id": "http://example.org/companies/SunPowerTech"}
-      ],
-      "location": "Paris, France"
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Person",
-      "@id": "http://example.org/investors/InnovativeFunds",
-      "name": "Innovative Investment Funds",
-      "investedIn": [
-        {"@id": "http://example.org/companies/WaveEnergySolutions"}
-      ],
-      "location": "New York, USA"
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Person",
-      "@id": "http://example.org/investors/GreenFunding",
-      "name": "Green Funding LLC",
-      "investedIn": [
-        {"@id": "http://example.org/companies/CleanTech"},
-        {"@id": "http://example.org/companies/BrightFutures"}
-      ],
-      "location": "San Francisco, USA"
-    }
-  ],
-  "Products": [
-    {
-      "@context": "http://schema.org/",
-      "@type": "Product",
-      "@id": "http://example.org/products/EcoFriendlyGadget1",
-      "name": "Eco-Friendly Gadget 1",
-      "launchYear": 2020,
-      "category": "Eco-Friendly Home",
-      "manufacturer": {"@id": "http://example.org/companies/CleanTech"}
-    },
-    {
-      "@context": "http://schema.org/",
-      "@type": "Product",
-      "@id": "http://example.org/products/SustainableWidget1",
-      "name": "Sustainable Widget 1",
-      "launchYear": 2021,
-      "category": "Sustainable Tech",
-      "manufacturer": {"@id": "http://example.org/companies/CleanTech"}
-    }
-  ],
-  "CertifyingOrganizations": [
-    {
-      "@context": "http://schema.org/",
-      "@type": "Organization",
-      "@id": "http://example.org/certifiers/EcoCertGlobal",
-      "name": "Eco Certification Global",
-      "industry": "Sustainability Certification",
-      "location": "Brussels, Belgium"
-    }
-  ]
-
-  };
-
-  const jsonDataString = JSON.stringify(jsonData, null, 2); // Indented with 2 spaces for formatting
-
-
   const messages = writable([]);
   let newMessage = '';
   let isLoading = writable(false); // To track loading state
 
-  async function processSparqlResponse() {
+  async function processResponse() {
     try {
-        const sparqlResponse = await axios.post('https://myseelia.life/generate_query', { question: newMessage });
+        const response = await axios.post('https://myseelia.life/query', { question: newMessage });
-        console.log("SPARQL Response:", sparqlResponse.data);
+        console.log("Response:", response.data);
 
-        const sparqlResult = sparqlResponse.data.sparql_query; 
+        messages.update(m => [...m, `Result: ${response.data.result}`]);
-        const formattedSparqlResult = sparqlResult.map(item => {
-            return Object.entries(item).map(([key, value]) => `${key}: ${value}`).join(', ');
-        }).join('; ');
-        messages.update(m => [...m, `SPARQL Result: ${formattedSparqlResult}`]);
     } catch (error) {
-        console.error("Error processing SPARQL query:", error);
+        console.error("Error processing prompt:", error);
-        messages.update(m => [...m, `Error: Could not process SPARQL query.`]);
+        messages.update(m => [...m, `Error: Could not process prompt.`]);
     }
   }
 
@@ -165,17 +32,25 @@
   }
 
   async function sendMessage() {
-    if (newMessage.trim() !== '') {
+  if (newMessage.trim() !== '') {
-        messages.update(m => [...m, `Query: ${newMessage}`]);
+    messages.update(m => [...m, `Query: ${newMessage}`]);
-        isLoading.set(true);
+    isLoading.set(true);
 
-        processSparqlResponse(); // Process SPARQL response independently
+    // Extract chat history for sending to the backend
-        processEntityMatchResponse(); // Process Entity Match response independently
+    let chatHistory = $messages.map(msg => {
+      return { role: msg.startsWith('Query:') ? 'user' : 'assistant', content: msg };
+    });
 
-        newMessage = '';
+    // Send both the new message and the chat history
-        isLoading.set(false);
+    const response = await axios.post('https://myseelia.life/query', { question: newMessage, history: chatHistory });
-    }
+    console.log("Response:", response.data);
+
+    messages.update(m => [...m, `Result: ${response.data.result}`]);
+
+    newMessage = '';
+    isLoading.set(false);
   }
+}
 
   function formatResultItem(item) {
     let formattedItem = [];
@@ -194,16 +69,19 @@
       sendMessage();
     }
   }
+
+  function getMessageType(message) {
+    if (message.startsWith('Query:')) return 'query';
+    if (message.startsWith('SPARQL Result:')) return 'sparql-result';
+    if (message.startsWith('Entity Matching Result:')) return 'entity-matching-result';
+    return 'other';
+  }
 </script>
 
-<section id="indexed-data">
-  <h2>Indexed DKG Data:</h2>
-  <pre>{jsonDataString}</pre>
-</section>
 <section class="chat-container">
   <div class="messages">
     {#each $messages as message}
-      <div class={`message ${message.startsWith('DKG Query:') ? 'query' : 'result'}`}>{message}</div>
+      <div class={`message ${getMessageType(message)}`}>{message}</div>
     {/each}
   </div>
   <div class="input-container">
@@ -212,18 +90,20 @@
       bind:value={newMessage}
       on:keydown={handleKeydown}
       rows="3"
-      disabled={$isLoading} 
+      disabled={$isLoading}
     ></textarea>
-    <button on:click={sendMessage} disabled={$isLoading}>Send</button>
+    <button on:click={sendMessage} disabled={$isLoading}>
+      {#if $isLoading}Loading...{:else}Send{/if}
+    </button>
     {#if $isLoading}
-      <div class="loading">Loading...</div> <!-- Loading indicator -->
+      <div class="loading">Processing...</div>
     {/if}
   </div>
 </section>
 
 <style>
   .chat-container {
-    /* Your styles for the chat container */
+    margin-bottom: 20px; /* Adds buffer of white space */
   }
   .messages {
     /* Styles for the messages container */
@@ -232,18 +112,21 @@
     /* Styles for individual messages */
   }
   .message.query {
-    background-color: #f0f8ff; /* Light blue background for queries */
+    color: #0000ff; /* Blue color for Query */
-    /* other styles for query messages */
   }
 
-  .message.result {
+  .message.sparql-result {
-    background-color: #f0fff0; /* Light green background for results */
+    color: #008000; /* Green color for SPARQL result */
-    /* other styles for result messages */
+  }
+
+  .message.entity-matching-result {
+    color: #0f2857; /* Orange color for Entity Matching Result */
   }
   .input-container {
     /* Styles for the input area */
     display: flex;
     align-items: center;
+    padding-bottom: 20px; /* Adds buffer of white space at the bottom */
   }
   .input-container textarea {
     width: 80%; /* Adjust as needed */
@@ -257,4 +140,8 @@
     font-size: 16px; /* Larger font size */
     padding: 5px 10px;
   }
+  .loading {
+    font-size: 16px;
+    color: #888888;
+  }
 </style>