Backend GKE Deploy, access key for backend

- Configs and automation for deploying backend to GKE
- First steps to adding an optional token check for requests to backend
- First steps frontend sending optional token to backend when configured

ui/components/ChatWindow.tsx

@@ -6,6 +6,7 @@ import Navbar from './Navbar';
 import Chat from './Chat';
 import EmptyChat from './EmptyChat';
 import { toast } from 'sonner';
+import { clientFetch } from '@/lib/utils';
 
 export type Message = {
   id: string;
@@ -34,8 +35,8 @@ const useSocket = (url: string) => {
           !embeddingModel ||
           !embeddingModelProvider
         ) {
-          const providers = await fetch(
-            `${process.env.NEXT_PUBLIC_API_URL}/models`,
+          const providers = await clientFetch(
+            '/models',
             {
               headers: {
                 'Content-Type': 'application/json',

ui/components/SearchImages.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Lightbox from 'yet-another-react-lightbox';
 import 'yet-another-react-lightbox/styles.css';
 import { Message } from './ChatWindow';
+import { clientFetch } from '@/lib/utils';
 
 type Image = {
   url: string;
@@ -33,8 +34,8 @@ const SearchImages = ({
             const chatModelProvider = localStorage.getItem('chatModelProvider');
             const chatModel = localStorage.getItem('chatModel');
 
-            const res = await fetch(
-              `${process.env.NEXT_PUBLIC_API_URL}/images`,
+            const res = await clientFetch(
+              '/images',
               {
                 method: 'POST',
                 headers: {

ui/components/SearchVideos.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Lightbox, { GenericSlide, VideoSlide } from 'yet-another-react-lightbox';
 import 'yet-another-react-lightbox/styles.css';
 import { Message } from './ChatWindow';
+import { clientFetch } from '@/lib/utils';
 
 type Video = {
   url: string;
@@ -46,8 +47,8 @@ const Searchvideos = ({
             const chatModelProvider = localStorage.getItem('chatModelProvider');
             const chatModel = localStorage.getItem('chatModel');
 
-            const res = await fetch(
-              `${process.env.NEXT_PUBLIC_API_URL}/videos`,
+            const res = await clientFetch(
+              '/videos',
               {
                 method: 'POST',
                 headers: {

ui/components/SettingsDialog.tsx

@@ -1,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
 import React, { Fragment, useEffect, useState } from 'react';
+import { clientFetch } from '@/lib/utils';
 
 interface SettingsType {
   chatModelProviders: {
@@ -42,7 +43,7 @@ const SettingsDialog = ({
     if (isOpen) {
       const fetchConfig = async () => {
         setIsLoading(true);
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
+        const res = await clientFetch('/config', {
           headers: {
             'Content-Type': 'application/json',
           },
@@ -102,7 +103,7 @@ const SettingsDialog = ({
     setIsUpdating(true);
 
     try {
-      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
+      await clientFetch('/config', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

ui/lib/config.ts

@@ -0,0 +1,20 @@
+interface Config {
+  GENERAL: {
+    SUPER_SECRET_KEY: string;
+    NEXT_PUBLIC_API_URL: string;
+  };
+}
+
+const loadEnv = () => {
+  return {
+    GENERAL: {
+      SUPER_SECRET_KEY: process.env.SUPER_SECRET_KEY!,
+      NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL!,
+      NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL!
+    },
+  } as Config;
+};
+
+export const getAccessKey = () => loadEnv().GENERAL.SUPER_SECRET_KEY;
+
+export const getBackendURL = () => loadEnv().GENERAL.NEXT_PUBLIC_API_URL;

ui/lib/utils.ts

@@ -1,5 +1,6 @@
 import clsx, { ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { getAccessKey, getBackendURL } from './config'
 
 export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));
 
@@ -19,3 +20,20 @@ export const formatTimeDifference = (date1: Date, date2: Date): string => {
   else
     return `${Math.floor(diffInSeconds / 31536000)} year${Math.floor(diffInSeconds / 31536000) !== 1 ? 's' : ''}`;
 };
+
+export const clientFetch = async (path: string, payload: any): Promise<any> => {
+  let headers = payload.headers;
+  const url = `${getBackendURL()}${path}`;
+  const secret_token = getAccessKey();
+
+  if (secret_token) {
+    if (headers == null) {
+      headers = {};
+    };
+
+    headers['Authorization'] = `Bearer ${secret_token}`;
+    payload.headers = headers;
+  };
+
+  return await fetch(url, payload);
+};