+
@@ -29,6 +34,14 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
+ callApi: {
+ type: Function,
+ default: null,
+ },
+ addMessage: {
+ type: Function,
+ default: null,
+ },
isStaticPage: {
type: Boolean,
default: false,
@@ -41,6 +54,18 @@ const props = defineProps({
type: String,
default: "",
},
+ openCanvas: {
+ type: Function,
+ default: null,
+ },
+ canvasState: {
+ type: Object,
+ default: () => ({}),
+ },
+ closeCanvas: {
+ type: Function,
+ default: null,
+ },
});
const messages = computed(() => {
@@ -220,6 +245,7 @@ const messageLoading = computed(() => {
.markdown-body [type="reset"],
.markdown-body [type="submit"] {
-webkit-appearance: button;
+ appearance: button;
}
.markdown-body [type="checkbox"],
@@ -236,6 +262,7 @@ const messageLoading = computed(() => {
.markdown-body [type="search"]::-webkit-search-cancel-button,
.markdown-body [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
+ appearance: none;
}
.markdown-body ::-webkit-input-placeholder {
@@ -245,6 +272,7 @@ const messageLoading = computed(() => {
.markdown-body ::-webkit-file-upload-button {
-webkit-appearance: button;
+ appearance: button;
font: inherit;
}
diff --git a/src/components/hooks/useChatInterface.js b/src/components/hooks/useChatInterface.js
index dd328ba..71f0235 100644
--- a/src/components/hooks/useChatInterface.js
+++ b/src/components/hooks/useChatInterface.js
@@ -3,21 +3,49 @@ import { ref, reactive } from "vue";
export function useChatInterface() {
const messageHandlers = {};
const chatInput = ref("");
- const chatAttachments = reactive([])
+ const chatAttachments = reactive([]);
+
+ const canvasHandlers = {};
+ const canvasState = reactive({
+ show: false,
+ type: null,
+ content: null,
+ });
const registerMessageHandler = (contentType, handler) => {
messageHandlers[contentType] = handler;
};
+ const registerCanvasHandler = (canvasType, handler) => {
+ canvasHandlers[canvasType] = handler;
+ };
+
const setChatInput = (input) => {
chatInput.value = input;
};
+ const openCanvas = (type, content) => {
+ canvasState.show = true;
+ canvasState.type = type;
+ canvasState.content = content || null;
+ };
+
+ const closeCanvas = () => {
+ canvasState.show = false;
+ canvasState.type = null;
+ canvasState.content = null;
+ };
+
return {
chatInput,
chatAttachments,
setChatInput,
messageHandlers,
registerMessageHandler,
+ canvasHandlers,
+ registerCanvasHandler,
+ canvasState,
+ openCanvas,
+ closeCanvas,
};
}
diff --git a/src/components/hooks/useVideoDBAgent.js b/src/components/hooks/useVideoDBAgent.js
index 4a4603b..24bafc5 100644
--- a/src/components/hooks/useVideoDBAgent.js
+++ b/src/components/hooks/useVideoDBAgent.js
@@ -19,11 +19,61 @@ const fetchData = async (rootUrl, endpoint) => {
return res;
};
+const apiRequest = async (rootUrl, endpoint, options = {}) => {
+ const {
+ method = "GET",
+ payload = null,
+ headers: customHeaders = {},
+ responseType = "json",
+ } = options;
+
+ const res = {};
+ try {
+ const init = { method, headers: { ...customHeaders } };
+
+ if (payload instanceof FormData) {
+ init.body = payload;
+ // Let the browser set the correct multipart/form-data headers
+ } else if (payload !== null && payload !== undefined) {
+ init.headers = {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ ...customHeaders,
+ };
+ init.body = JSON.stringify(payload);
+ }
+
+ const response = await fetch(`${rootUrl}${endpoint}`, init);
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
+ }
+
+ let data;
+ if (responseType === "text") {
+ data = await response.text();
+ } else if (responseType === "blob") {
+ data = await response.blob();
+ } else {
+ data = await response.json();
+ }
+
+ res.status = "success";
+ res.data = data;
+ } catch (error) {
+ res.status = "error";
+ res.error = error;
+ }
+ return res;
+};
+
export function useVideoDBAgent(config) {
const { debug = false, socketUrl, httpUrl } = config;
if (debug) console.log("debug :videodb-chat config", config);
const socket = io(socketUrl);
+ const callApi = (endpoint, options = {}) =>
+ apiRequest(httpUrl, endpoint, options);
+
const session = reactive({
isConnected: false,
sessionId: null,
@@ -638,5 +688,6 @@ export function useVideoDBAgent(config) {
uploadMedia,
generateImageUrl,
generateAudioUrl,
+ callApi,
};
}