Multi model backend support for Ollama, OpenAI, Gemini & Claude with human-like friendly chat abilities (#43) (#44)

* added multi-model switching logic for ollama

* readme changes



* fix: moved api key setting logic to python backend

* feat: model selector in onboarding

* feat: structured output support for cloud models

* fix: added self.messages property

* fix: updated selected model logic

* fix: runnable model mapping logic updates (WIP)

* fix: added default state to self.messages

* fix: added self.system_prompt_template

* fix: structured outputs in agents with cloud providers (WIP)

* fix: working on agents fix

* fix: elaborator response structure

* fix: updated runnables with working logic (WIP)

* feat:
widget teaser - added reminder widget to show what widgets on home screen will look like
chat page - added current model selected feature
sidebar - revamped sidebar. started as an experiment, went in for a full revamp
settings page - added API key management features - delete or add keys manually for your models

fix:
multiple bugfixes

* fix: chat message icons

* fix: resolved elaborator issue

---------

Co-authored-by: Kabeer2004 <merchantkabeer68@gmail.com>

Author: itsskofficial

README.md

@@ -23,6 +23,7 @@ import IconGoogleCalendar from "@components/icons/IconGoogleCalendar" // Icon fo
 import IconGoogleSlides from "@components/icons/IconGoogleSlides" // Icon for Google Slides command
 import IconGoogleMail from "@components/icons/IconGoogleMail" // Icon for Google Mail command
 import IconGoogleDrive from "@components/icons/IconGoogleDrive" // Icon for Google Drive command
+import ReminderWidget from "@components/agents/Reminder"
 
 /**
  * Chat component for the main chat interface.
@@ -59,6 +60,7 @@ const Chat = () => {
 	const [showCommands, setShowCommands] = useState(false) // showCommands: boolean
 	// State to hold the filtered slash commands based on user input.
 	const [filteredCommands, setFilteredCommands] = useState([]) // filteredCommands: { text: string, value: string, icon: React.ReactNode }[]
+	const [currentModel, setCurrentModel] = useState("")
 
 	/**
 	 * Array of available slash commands.
@@ -265,6 +267,21 @@ const Chat = () => {
 		}
 	}
 
+	const fetchCurrentModel = async () => {
+		try {
+			const response = await window.electron?.invoke("get-db-data")
+			if (response.status === 200 && response.data) {
+				const selectedModel = response.data.selectedModel
+				setCurrentModel(selectedModel || "llama3.2:3b")
+			} else {
+				setCurrentModel("llama3.2:3b") // Fallback if no data
+			}
+		} catch (error) {
+			toast.error("Error fetching user data.")
+			setCurrentModel("llama3.2:3b") // Fallback on error
+		}
+	}
+
 	/**
 	 * Initializes the chat session with the backend for the given chatId.
 	 */
@@ -310,6 +327,7 @@ const Chat = () => {
 	 */
 	useEffect(() => {
 		fetchUserDetails()
+		fetchCurrentModel()
 	}, [])
 
 	/**
@@ -638,14 +656,18 @@ const Chat = () => {
 						"absolute flex flex-col justify-center items-center w-full h-full"
 					}
 				/>
-				<div className="w-3/5 flex flex-col font-Poppins justify-center items-center h-full bg-matteblack">
-					<h1
-						className="text-8xl text-white font-bold mb-8"
-						style={{ zIndex: 10 }}
-					>
-						what&apos;s on your mind?
-					</h1>
-					<AiButton onClick={() => setShowCreateChatOverlay(true)} />
+				<div className="w-3/5 flex flex-col font-Poppins items-center h-full relative">
+					<div className="flex flex-col items-center justify-center flex-grow">
+						<h1
+							className="text-8xl text-white font-bold mb-8"
+							style={{ zIndex: 10 }}
+						>
+							what's on your mind?
+						</h1>
+						<AiButton
+							onClick={() => setShowCreateChatOverlay(true)}
+						/>
+					</div>
 					{showCreateChatOverlay && (
 						<ModalDialog
 							title="Create a New Chat"
@@ -661,6 +683,15 @@ const Chat = () => {
 							showInput={true}
 						/>
 					)}
+					<div className="absolute bottom-16 left-0 right-0 flex flex-col items-center justify-center">
+						<p className="text-white text-sm mb-5">
+							Widgets are coming here soon! 👇
+						</p>
+						<div className="flex flex-row gap-8">
+							<ReminderWidget />
+							{/* Add more widgets here in the future, e.g., <AnotherWidget /> */}
+						</div>
+					</div>
 				</div>
 			</div>
 		)
@@ -796,6 +827,14 @@ const Chat = () => {
 
 						<div ref={chatEndRef} />
 					</div>
+					<p className="text-gray-400 font-Poppins text-sm">
+						You can change now your model from the{" "}
+						<a href="/settings" className="underline">
+							Settings
+						</a>{" "}
+						page! Current Model:{" "}
+						<span className="text-lightblue">{currentModel}</span>
+					</p>
 					<div className="relative mb-5 flex flex-row gap-4 w-full px-4 py-1 bg-matteblack border-[1px] border-white rounded-lg z-30">
 						<textarea
 							ref={textareaRef}

src/interface/app/chat/page.js

@@ -269,7 +269,7 @@ const AppIntegration = () => {
 						<AppCard
 							logo="/images/linkedin-logo.png" // LinkedIn logo image path
 							name="LinkedIn" // App name - LinkedIn
-							description="Connect your LinkedIn account to pull in your professional profile and enhance your experience." // Description for LinkedIn card
+							description="Connect your LinkedIn account to add your professional information to Sentient's context." // Description for LinkedIn card
 							onClick={() => {
 								// OnClick handler for LinkedIn card
 								if (!isConnecting && !connectedApps.LinkedIn) {
@@ -287,7 +287,7 @@ const AppIntegration = () => {
 						<AppCard
 							logo="/images/reddit-logo.png" // Reddit logo image path
 							name="Reddit" // App name - Reddit
-							description="Connect your Reddit account to analyze your subreddit activity and identify topics of interest." // Description for Reddit card
+							description="Connect your Reddit account to let Sentient analyze your subreddit activity and identify topics of interest." // Description for Reddit card
 							onClick={() => {
 								// OnClick handler for Reddit card
 								if (
@@ -319,7 +319,7 @@ const AppIntegration = () => {
 						<AppCard
 							logo="/images/twitter-logo.png" // Twitter logo image path
 							name="Twitter" // App name - Twitter
-							description="Connect your Twitter account to analyze your tweets and identify topics of interest." // Description for Twitter card
+							description="Connect your Twitter account to let Sentient analyze your tweets and identify topics of interest." // Description for Twitter card
 							onClick={() => {
 								// OnClick handler for Twitter card
 								if (
@@ -358,7 +358,7 @@ const AppIntegration = () => {
 					</ShiningButton>
 					<div
 						data-tooltip-id="integrations" // Tooltip ID for integrations info
-						data-tooltip-content="You can always connect or disconnect the apps from the settings page later" // Tooltip content
+						data-tooltip-content="You can always connect or disconnect the apps from the Settings page later. All data stays local." // Tooltip content
 						className="absolute top-4 right-4" // Positioning classes
 					>
 						<button className="text-gray-300 hover-button p-2 rounded-[50%] text-sm cursor-default">

src/interface/app/integrations/page.js

@@ -9,6 +9,7 @@ import AnimatedLogo from "@components/AnimatedLogo" // Component for displaying
 import ShiningButton from "@components/ShiningButton" // Custom button component with a shining effect
 import AnimatedBeam from "@components/AnimatedBeam" // Component for animated beam effect
 import ShinyCard from "@components/ShinyCard" // Custom card component with a shiny effect
+import ModelSelection from "@components/ModelSelection"
 import toast from "react-hot-toast" // Library for displaying toast notifications
 
 /**
@@ -169,6 +170,7 @@ const PersonalityTest = () => {
 	const [isReferred, setIsReferred] = useState(null) // isReferred: boolean | null
 	// State to store the referral code entered by the user.
 	const [referralCode, setReferralCode] = useState("") // referralCode: string
+	const [showModelSelection, setShowModelSelection] = useState(false)
 
 	/**
 	 * useEffect hook to fetch existing personality data on component mount.
@@ -415,17 +417,17 @@ const PersonalityTest = () => {
 	const handleBasicInfoSubmit = async (basicInfo) => {
 		try {
 			const response = await window.electron?.invoke("set-db-data", {
-				// Invoke electron to set data in database
-				data: { personalInfo: basicInfo } // Data to set is the basicInfo object
+				data: { personalInfo: basicInfo }
 			})
 
 			if (response.status === 200) {
-				setShowBasicInfoForm(false) // Hide BasicInfoForm on successful submission
+				setShowBasicInfoForm(false)
+				setShowModelSelection(true) // Show model selection after basic info
 			} else {
-				throw new Error("Error saving basic information") // Throw error if response status is not 200
+				throw new Error("Error saving basic information")
 			}
 		} catch (error) {
-			toast.error(`Error saving basic information: ${error}`) // Show error toast if any error occurs
+			toast.error(`Error saving basic information: ${error}`)
 		}
 	}
 
@@ -728,6 +730,19 @@ const PersonalityTest = () => {
 	 *
 	 * @returns {React.ReactNode} - The main UI for the PersonalityTest component.
 	 */
+
+	if (showModelSelection) {
+		return (
+			<AnimatedBeam className={"w-screen h-screen"}>
+				<div className="min-h-screen flex justify-center items-center">
+					<ModelSelection
+						onProceed={() => setShowModelSelection(false)}
+					/>
+				</div>
+			</AnimatedBeam>
+		)
+	}
+
 	return (
 		<AnimatedBeam className={"w-screen h-screen"}>
 			<div className="relative overflow-hidden">