Added automatic docker build on merge to master

This PR includes:
- Automatic build & push to docker hub when pushing to master, or when triggering a workflow dispatch on master
- Automatic docker build on pull requests to validate changes
- Updated the docker-compose.yaml to use the container images, rather than building locally
- Added support for defining backend settings using the container environment 
  -> All options defined in config.toml can now be loaded instead from the environment
  -> Order of precedence is environment definition, config.toml, and finally default inline configuration defined in config.ts
- Added support for defining frontend settings using the container environment
  -> Added a dynamic api route to load the container environment definitions on the server, and provide them to the client
  -> Added a library function to fetch from the newly created API, caching the response in the session storage
  -> Modified existing calls to `process.env` to use the new library function
  -> Left the initial statically compiled environment definitions in place as a backup definition, if no environment definitions are provided

Remaining tasks todo before able to merge to [ItzCrazyKns/Perplexica](https://github.com/ItzCrazyKns/Perplexica):
- Add secret definitions for `DOCKER_USERNAME` and `DOCKER_PASSWORD` to [ItzCrazyKns/Perplexica](https://github.com/ItzCrazyKns/Perplexica) to ensure push to dockerhub works on base branch
- Update documentation with information about changes

ui/app/api/env/route.ts

@@ -0,0 +1,16 @@
+import process from 'process';
+import { NextResponse } from 'next/server';
+
+// Enable the Runtime
+export const runtime = "edge"
+
+export async function GET(_request: Request) {
+  // Access environment variables
+  const envVars = {
+    'BACKEND_API_URL': process.env.BACKEND_API_URL ?? process.env.NEXT_PUBLIC_API_URL,
+    'BACKEND_WS_URL': process.env.BACKEND_WS_URL ?? process.env.NEXT_PUBLIC_WS_URL
+  }
+
+  // Return the environment variables as a JSON response
+  return NextResponse.json(envVars);
+}

ui/app/library/page.tsx

@@ -5,6 +5,7 @@ import { formatTimeDifference } from '@/lib/utils';
 import { BookOpenText, ClockIcon, Delete, ScanEye } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import { getServerEnv } from '@/lib/serverEnvironment';
 
 export interface Chat {
   id: string;
@@ -21,7 +22,7 @@ const Page = () => {
     const fetchChats = async () => {
       setLoading(true);
 
-      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/chats`, {
+      const res = await fetch(`${await getServerEnv("BACKEND_API_URL")}/chats`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',

ui/components/ChatWindow.tsx

@@ -10,6 +10,7 @@ import { toast } from 'sonner';
 import { useSearchParams } from 'next/navigation';
 import { getSuggestions } from '@/lib/actions';
 import Error from 'next/error';
+import { getServerEnv } from '@/lib/serverEnvironment';
 
 export type Message = {
   messageId: string;
@@ -22,13 +23,16 @@ export type Message = {
 };
 
 const useSocket = (
-  url: string,
+  url: string | null,
   setIsWSReady: (ready: boolean) => void,
   setError: (error: boolean) => void,
 ) => {
   const [ws, setWs] = useState<WebSocket | null>(null);
 
   useEffect(() => {
+    if (!url) {
+      return;
+    }
     if (!ws) {
       const connectWs = async () => {
         let chatModel = localStorage.getItem('chatModel');
@@ -39,7 +43,7 @@ const useSocket = (
         );
 
         const providers = await fetch(
-          `${process.env.NEXT_PUBLIC_API_URL}/models`,
+          `${await getServerEnv("BACKEND_API_URL")}/models`,
           {
             headers: {
               'Content-Type': 'application/json',
@@ -220,7 +224,7 @@ const loadMessages = async (
   setNotFound: (notFound: boolean) => void,
 ) => {
   const res = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}/chats/${chatId}`,
+    `${await getServerEnv("BACKEND_API_URL")}/chats/${chatId}`,
     {
       method: 'GET',
       headers: {
@@ -260,6 +264,8 @@ const loadMessages = async (
 };
 
 const ChatWindow = ({ id }: { id?: string }) => {
+  const [wsServerUrl, setWsServerUrl] = useState<string | null>(null);
+
   const searchParams = useSearchParams();
   const initialMessage = searchParams.get('q');
 
@@ -271,7 +277,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   const [isWSReady, setIsWSReady] = useState(false);
   const ws = useSocket(
-    process.env.NEXT_PUBLIC_WS_URL!,
+    wsServerUrl,
     setIsWSReady,
     setHasError,
   );
@@ -323,6 +329,15 @@ const ChatWindow = ({ id }: { id?: string }) => {
     }
   }, [isMessagesLoaded, isWSReady]);
 
+  useEffect(() => {
+    const fetchWsServerUrl = async () => {
+      const url = await getServerEnv("BACKEND_WS_URL");
+      setWsServerUrl(url);
+    };
+
+    fetchWsServerUrl();
+  }, []);
+
   const sendMessage = async (message: string) => {
     if (loading) return;
     setLoading(true);

ui/components/DeleteChat.tsx

@@ -3,6 +3,7 @@ import { Dialog, Transition } from '@headlessui/react';
 import { Fragment, useState } from 'react';
 import { toast } from 'sonner';
 import { Chat } from '@/app/library/page';
+import { getServerEnv } from '@/lib/serverEnvironment';
 
 const DeleteChat = ({
   chatId,
@@ -20,7 +21,7 @@ const DeleteChat = ({
     setLoading(true);
     try {
       const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/chats/${chatId}`,
+        `${await getServerEnv("BACKEND_API_URL")}/chats/${chatId}`,
         {
           method: 'DELETE',
           headers: {

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 { getServerEnv } from '@/lib/serverEnvironment';
 
 type Image = {
   url: string;
@@ -34,7 +35,7 @@ const SearchImages = ({
             const chatModel = localStorage.getItem('chatModel');
 
             const res = await fetch(
-              `${process.env.NEXT_PUBLIC_API_URL}/images`,
+              `${await getServerEnv("BACKEND_API_URL")}/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 { getServerEnv } from '@/lib/serverEnvironment';
 
 type Video = {
   url: string;
@@ -47,7 +48,7 @@ const Searchvideos = ({
             const chatModel = localStorage.getItem('chatModel');
 
             const res = await fetch(
-              `${process.env.NEXT_PUBLIC_API_URL}/videos`,
+              `${await getServerEnv("BACKEND_API_URL")}/videos`,
               {
                 method: 'POST',
                 headers: {

ui/components/SettingsDialog.tsx

@@ -8,6 +8,7 @@ import React, {
   type SelectHTMLAttributes,
 } from 'react';
 import ThemeSwitcher from './theme/Switcher';
+import { getServerEnv } from '@/lib/serverEnvironment';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
@@ -88,7 +89,7 @@ const SettingsDialog = ({
     if (isOpen) {
       const fetchConfig = async () => {
         setIsLoading(true);
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
+        const res = await fetch(`${await getServerEnv("BACKEND_API_URL")}/config`, {
           headers: {
             'Content-Type': 'application/json',
           },
@@ -148,7 +149,7 @@ const SettingsDialog = ({
     setIsUpdating(true);
 
     try {
-      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/config`, {
+      await fetch(`${await getServerEnv("BACKEND_API_URL")}/config`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

ui/lib/actions.ts

@@ -1,10 +1,11 @@
 import { Message } from '@/components/ChatWindow';
+import { getServerEnv } from '@/lib/serverEnvironment';
 
 export const getSuggestions = async (chatHisory: Message[]) => {
   const chatModel = localStorage.getItem('chatModel');
   const chatModelProvider = localStorage.getItem('chatModelProvider');
 
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/suggestions`, {
+  const res = await fetch(`${await getServerEnv("BACKEND_API_URL")}/suggestions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

ui/lib/serverEnvironment.ts

@@ -0,0 +1,29 @@
+async function fetchConfig() {
+  try {
+    const response = await fetch('/api/env');
+    if (response.ok) {
+      const data = await response.json();
+      sessionStorage.setItem('cachedConfig', JSON.stringify(data));
+      return data;
+    } else {
+      throw new Error('Failed to fetch config');
+    }
+  } catch (error) {
+    return null;
+  }
+}
+
+export async function getServerEnv(envVar: string): Promise<string> {
+  const cachedConfig = JSON.parse(sessionStorage.getItem('cachedConfig') || 'null');
+
+  if (cachedConfig) {
+    return cachedConfig[envVar];
+  }
+
+  const data = await fetchConfig();
+  if (!data) {
+    return "";
+  }
+
+  return data[envVar];
+}