From 8150c935b905dfd429d8791861abe38c03fd50b2 Mon Sep 17 00:00:00 2001 From: Asin-Junior-Honore Date: Tue, 18 Jun 2024 10:51:26 +0100 Subject: [PATCH 1/2] Refactor to use localized state management for conversation ID --- src/app/components/Copilot/Copilot.tsx | 131 +++++++++++++++---------- 1 file changed, 77 insertions(+), 54 deletions(-) diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx index 8b54c7f..8b47265 100644 --- a/src/app/components/Copilot/Copilot.tsx +++ b/src/app/components/Copilot/Copilot.tsx @@ -1,61 +1,68 @@ -import * as React from 'react' -import {useEffect, useState} from 'react' +import * as React from "react"; +import { useEffect, useState } from "react"; import * as Pieces from "@pieces.app/pieces-os-client"; -import {ConversationTypeEnum, SeededConversation} from "@pieces.app/pieces-os-client"; +import { + ConversationTypeEnum, + SeededConversation, +} from "@pieces.app/pieces-os-client"; import "./Copilot.css"; - -import { applicationData } from "../../App"; -import CopilotStreamController from '../../controllers/copilotStreamController'; - - -let GlobalConversationID: string; - +import CopilotStreamController from "../../controllers/copilotStreamController"; // going to use get all conversations with a few extra steps to store the current conversations locally. -export function createNewConversation() { +export function createNewConversation( + setConversationID: React.Dispatch> +) { try { - // logs --> CREATING CONVERSATION - console.log('Begin creating conversation...') + console.log("Begin creating conversation..."); // to create a new conversation, you need to first pass in a seeded conversation in the request body. // the only mandatory parameter is the ConversationTypeEnum.Copilot value. - let seededConversation: SeededConversation = { type: ConversationTypeEnum.Copilot, name: "Demo Seeded Conversation" } + let seededConversation: SeededConversation = { + type: ConversationTypeEnum.Copilot, + name: "Demo Seeded Conversation", + }; - console.log('Conversation seeded') - console.log('Passing over the new conversation with name: ' + seededConversation.name) + console.log("Conversation seeded"); + console.log( + "Passing over the new conversation with name: " + seededConversation.name + ); // creates new conversation, .then is for confirmation on creation. // note the usage of transfereables here to expose the full conversation data and give access to the id and other // conversation values. - new Pieces.ConversationsApi().conversationsCreateSpecificConversationRaw({transferables: true, seededConversation}).then((_c) => { - console.log('Conversation created! : Here is the response:'); - console.log(_c); - - // check and ensure the response back is clean. - if (_c.raw.ok == true && _c.raw.status == 200) { - console.log('CLEAN RESPONSE BACK.') - _c.value().then(_conversation => { - console.log('Returning new conversation values.'); - // console.log('ID | ' + _conversation.id); - // console.log('NAME | ' + _conversation.name); - // console.log('CREATED | ' + _conversation.created.readable); - // console.log('ID: ' + _conversation.); - - // Set the conversation variable here for the local file: - GlobalConversationID = _conversation.id; - }) - } - }) + new Pieces.ConversationsApi() + .conversationsCreateSpecificConversationRaw({ + transferables: true, + seededConversation, + }) + .then((_c) => { + console.log("Conversation created! : Here is the response:"); + console.log(_c); + + // check and ensure the response back is clean. + if (_c.raw.ok == true && _c.raw.status == 200) { + console.log("CLEAN RESPONSE BACK."); + _c.value().then((_conversation) => { + console.log("Returning new conversation values."); + // console.log('ID | ' + _conversation.id); + // console.log('NAME | ' + _conversation.name); + // console.log('CREATED | ' + _conversation.created.readable); + // console.log('ID: ' + _conversation.); + + // Set the conversation variable here for the local file: + setConversationID(_conversation.id); + }); + } + }); } catch (error) { - console.error('An error occurred while creating a conversation:', error); + console.error("An error occurred while creating a conversation:", error); } } - // You can use this here to set and send a conversation message. -// function sendConversationMessage(prompt: string, conversationID: string = GlobalConversationID){ +// function sendConversationMessage(prompt: string, conversationID: string){ // // 1. seed a message // // 2. get the conversation id from somewhere - likely the createNewConversation above ^^ // // 3. send the new message over @@ -74,32 +81,36 @@ export function createNewConversation() { // // GlobalConversationAnswers = [..._answers]; // }) // } + export function CopilotChat(): React.JSX.Element { - const [chatSelected, setChatSelected] = useState('-- no chat selected --'); - const [chatInputData, setData] = useState(''); - const [message, setMessage] = useState(''); + const [chatSelected, setChatSelected] = useState("-- no chat selected --"); + const [chatInputData, setData] = useState(""); + const [message, setMessage] = useState(""); + const [conversationID, setConversationID] = useState(""); // handles the data changes on the chat input. - const handleCopilotChatInputChange = (event: { target: { value: React.SetStateAction; }; }) => { + const handleCopilotChatInputChange = (event: { + target: { value: React.SetStateAction }; + }) => { setData(event.target.value); }; // handles the ask button click. - const handleCopilotAskbuttonClick = async (chatInputData, setMessage)=>{ + const handleCopilotAskbuttonClick = async (chatInputData, setMessage) => { CopilotStreamController.getInstance().askQGPT({ query: chatInputData, setMessage, }); setData(""); - } + }; // handles the new conversation button click. const handleNewConversation = async () => { - createNewConversation(); - setMessage("") - setData("") + createNewConversation(setConversationID); + setMessage(""); + setData(""); }; - + // for setting the initial copilot chat that takes place on page load. useEffect(() => { const getInitialChat = async () => { @@ -113,11 +124,11 @@ export function CopilotChat(): React.JSX.Element { output.iterable.at(0).hasOwnProperty("name") ) { _name = output.iterable.at(0).name; - GlobalConversationID = output.iterable.at(0).id; + setConversationID(output.iterable.at(0).id); } return _name; }); - + if (_name) { setChatSelected(_name); } @@ -130,7 +141,9 @@ export function CopilotChat(): React.JSX.Element {

Copilot Chat

- +
@@ -140,8 +153,18 @@ export function CopilotChat(): React.JSX.Element {
- - + +
@@ -151,4 +174,4 @@ export function CopilotChat(): React.JSX.Element {
); -} \ No newline at end of file +} From d1c09a41503759f3b95e7e42604b6103ae575028 Mon Sep 17 00:00:00 2001 From: Asin-Junior-Honore Date: Mon, 1 Jul 2024 09:23:51 +0100 Subject: [PATCH 2/2] Clean up extra spaces and unwanted changes --- src/app/components/Copilot/Copilot.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx index 8b47265..a66004b 100644 --- a/src/app/components/Copilot/Copilot.tsx +++ b/src/app/components/Copilot/Copilot.tsx @@ -23,11 +23,8 @@ export function createNewConversation( type: ConversationTypeEnum.Copilot, name: "Demo Seeded Conversation", }; - - console.log("Conversation seeded"); - console.log( - "Passing over the new conversation with name: " + seededConversation.name - ); + console.log('Conversation seeded') + console.log('Passing over the new conversation with name: ' + seededConversation.name) // creates new conversation, .then is for confirmation on creation. // note the usage of transfereables here to expose the full conversation data and give access to the id and other @@ -57,7 +54,7 @@ export function createNewConversation( } }); } catch (error) { - console.error("An error occurred while creating a conversation:", error); + console.error('An error occurred while creating a conversation:', error); } }