Add model indicator to chat playground (#21)

Co-authored-by: Dennis Traub <[email protected]>

Author: DennisTraub

Diff for: frontend/components/chatPlayground/ChatComponent.jsx

@@ -5,6 +5,7 @@ import React, { useState } from "react";
 import Assistant from "@/components/chatPlayground/Assistant";
 import Loader from "@/components/chatPlayground/Loader";
 import GlobalConfig from "@/app/app.config";
+import ModelIndicator from "@/components/chatPlayground/ModelIndicator";
 
 export default function ChatContainer() {
     const [conversation, setConversation] = useState([]);
@@ -62,8 +63,9 @@ export default function ChatContainer() {
     };
 
     return <div className="flex flex-col flex-auto h-full p-6">
-        <h3 className="text-3xl font-medium text-gray-700">Chat Playground (Anthropic Claude V2)</h3>
+        <h3 className="text-3xl font-medium text-gray-700">Chat Playground</h3>
         <div className="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-100 p-4 mt-8">
+            <ModelIndicator modelName="Anthropic Claude 2" />
             <div className="flex flex-col h-full overflow-x-auto mb-4">
                 <div className="flex flex-col h-full">
                     <div className="grid grid-cols-12 gap-y-2">

Diff for: frontend/components/chatPlayground/ModelIndicator.jsx

@@ -0,0 +1,14 @@
+"use client"
+
+export default function ModelIndicator({ modelName }) {
+    return (
+        <div className="w-64 mb-4">
+            <div className="relative w-full">
+                <div id="dropdown-button"
+                        className="inline-flex justify-left w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm">
+                    <span className="mr-auto">Model: {modelName}</span>
+                </div>
+            </div>
+        </div>
+    );
+};

Diff for: frontend/components/textPlayground/TextComponent.jsx

@@ -2,9 +2,9 @@
 
 import React, { useState } from "react";
 import GlobalConfig from "@/app/app.config"
-import TextModelSelector from "../shared/TextModelSelector";
+import TextModelSelector from "./TextModelSelector";
 import Textarea from "./Textarea";
-import { defaultModel, defaultPayload } from "../shared/textModels";
+import { defaultModel, defaultPayload } from "@/helpers/modelData";
 import NumericInput from "./NumericInput";
 
 export default function TextContainer() {
@@ -19,42 +19,23 @@ export default function TextContainer() {
         setMaxTokens(newModel.maxTokenRange.default);
     }
 
-    const setPrompt = (newPrompt) => {
-        setPayload((prevPayload) => ({
-            ...prevPayload,
-            prompt: newPrompt
-        }));
-    }
-
-    const setTemperature = (newTemperature) => {
-        setPayload((prevPayload) => ({
-            ...prevPayload,
-            temperature: newTemperature
-        }));
-    }
+    const setPrompt = (newPrompt) => setPayload(
+        (prevPayload) => ({ ...prevPayload, prompt: newPrompt })
+    );
 
-    const setMaxTokens = (newMaxTokens) => {
-        setPayload((prevPayload) => ({
-            ...prevPayload,
-            maxTokens: newMaxTokens
-        }));
-    };
+    const setTemperature = (newTemperature) => setPayload(
+        (prevPayload) => ({ ...prevPayload, temperature: newTemperature })
+    );
 
-    const handlePromptChange = (e) => { 
-        setPrompt(e.target.value); 
-    };
+    const setMaxTokens = (newMaxTokens) => setPayload(
+        (prevPayload) => ({ ...prevPayload, maxTokens: newMaxTokens })
+    );
 
-    const handleTemperatureChange = (value) => {
-        setTemperature(value);
-    };
+    const handlePromptChange = (e) => setPrompt(e.target.value);
 
-    const handleMaxTokensChange = (value) => {
-        setMaxTokens(value);
-    };
+    const handleTemperatureChange = (value) => setTemperature(value);
 
-    const isNullOrBlankOrEmpty = (str) => {
-        return str == null || str.match(/^ *$/) !== null;
-    }
+    const handleMaxTokensChange = (value) => setMaxTokens(value);
 
     const getButtonClass = () => {
         const inactiveButtonClass = "flex w-[100px] items-center justify-center bg-indigo-300 rounded-xl text-white px-3 py-2 flex-shrink-0";
@@ -63,7 +44,7 @@ export default function TextContainer() {
     }
 
     const sendMessage = async () => {
-        if (isNullOrBlankOrEmpty(payload.prompt)) { return; }
+        if (payload.prompt === null || payload.prompt === undefined || payload.prompt.trim() === "") { return; }
 
         setIsLoading(true);
 
@@ -177,4 +158,4 @@ export default function TextContainer() {
             </div>
         </div>
     )
-};
+};

Diff for: frontend/components/shared/TextModelSelector.jsx renamed to frontend/components/textPlayground/TextModelSelector.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React, {useState} from "react";
-import { models } from './textModels';
+import { models } from '../../helpers/modelData';
 
 export default function TextModelSelector({ model, onModelChange }) {
     const [isOpen, setIsOpen] = useState(false);

Diff for: frontend/components/shared/textModels.js renamed to frontend/helpers/modelData.js

@@ -1,5 +1,5 @@
 export const defaultModel = {
-    modelName: "Anthropic Claude V2",
+    modelName: "Anthropic Claude 2",
     modelId: "anthropic.claude-v2",
     temperatureRange: {
         min: 0,