feat(assistants_web): added temperature to agent settings

src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/UpdateAgent.tsx

@@ -8,7 +8,11 @@ import { AgentSettingsFields, AgentSettingsForm } from '@/components/AgentSettin
 import { MobileHeader } from '@/components/Global';
 import { DeleteAgent } from '@/components/Modals/DeleteAgent';
 import { Button, Icon, Spinner, Text } from '@/components/UI';
-import { DEFAULT_AGENT_MODEL, DEPLOYMENT_COHERE_PLATFORM } from '@/constants';
+import {
+  DEFAULT_AGENT_MODEL,
+  DEFAULT_AGENT_TEMPERATURE,
+  DEPLOYMENT_COHERE_PLATFORM,
+} from '@/constants';
 import { useContextStore } from '@/context';
 import { useIsAgentNameUnique, useNotify, useUpdateAgent } from '@/hooks';
 
@@ -28,6 +32,7 @@ export const UpdateAgent: React.FC<Props> = ({ agent }) => {
     description: agent.description,
     deployment: agent.deployment ?? DEPLOYMENT_COHERE_PLATFORM,
     model: agent.model ?? DEFAULT_AGENT_MODEL,
+    temperature: agent.temperature ?? DEFAULT_AGENT_TEMPERATURE,
     tools: agent.tools,
     preamble: agent.preamble,
     tools_metadata: agent.tools_metadata,

src/interfaces/assistants_web/src/app/(main)/new/CreateAgent.tsx

@@ -11,6 +11,7 @@ import { Button, Icon, Text } from '@/components/UI';
 import {
   BACKGROUND_TOOLS,
   DEFAULT_AGENT_MODEL,
+  DEFAULT_AGENT_TEMPERATURE,
   DEFAULT_PREAMBLE,
   DEPLOYMENT_COHERE_PLATFORM,
 } from '@/constants';
@@ -23,6 +24,7 @@ const DEFAULT_FIELD_VALUES = {
   preamble: DEFAULT_PREAMBLE,
   deployment: DEPLOYMENT_COHERE_PLATFORM,
   model: DEFAULT_AGENT_MODEL,
+  temperature: DEFAULT_AGENT_TEMPERATURE,
   tools: BACKGROUND_TOOLS,
   is_private: false,
 };

src/interfaces/assistants_web/src/components/AgentSettingsForm/ConfigStep.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 
 import { AgentSettingsFields } from '@/components/AgentSettingsForm';
-import { Dropdown } from '@/components/UI';
+import { Dropdown, Slider } from '@/components/UI';
 import { useListAllDeployments } from '@/hooks';
 
 type Props = {
@@ -13,7 +13,10 @@ type Props = {
 };
 
 export const ConfigStep: React.FC<Props> = ({ fields, setFields }) => {
-  const [selectedValue, setSelectedValue] = useState<string | undefined>(fields.model);
+  const [selectedModelValue, setSelectedModelValue] = useState<string | undefined>(fields.model);
+  const [selectedTempValue, setSelectedTempValue] = useState<number | undefined>(
+    fields.temperature
+  );
 
   const { data: deployments } = useListAllDeployments();
 
@@ -27,12 +30,23 @@ export const ConfigStep: React.FC<Props> = ({ fields, setFields }) => {
       <Dropdown
         label="Model"
         options={modelOptions ?? []}
-        value={selectedValue}
+        value={selectedModelValue}
         onChange={(model) => {
           setFields({ ...fields, model: model });
-          setSelectedValue(model);
+          setSelectedModelValue(model);
         }}
       />
+      <Slider
+        label="Temperature"
+        min={0}
+        max={1.0}
+        step={0.1}
+        value={selectedTempValue || 0}
+        onChange={(temperature) => {
+          setFields({ ...fields, temperature: temperature });
+          setSelectedTempValue(temperature);
+        }}
+      ></Slider>
     </div>
   );
 };

src/interfaces/assistants_web/src/components/AgentSettingsForm/index.tsx

@@ -24,13 +24,13 @@ type RequiredAndNotNull<T> = {
 type RequireAndNotNullSome<T, K extends keyof T> = RequiredAndNotNull<Pick<T, K>> & Omit<T, K>;
 
 type CreateAgentSettingsFields = RequireAndNotNullSome<
-  Omit<CreateAgentRequest, 'version' | 'temperature'>,
-  'name' | 'model' | 'deployment'
+  Omit<CreateAgentRequest, 'version'>,
+  'name' | 'model' | 'deployment' | 'temperature'
 >;
 
 type UpdateAgentSettingsFields = RequireAndNotNullSome<
-  Omit<UpdateAgentRequest, 'version' | 'temperature'>,
-  'name' | 'model' | 'deployment'
+  Omit<UpdateAgentRequest, 'version'>,
+  'name' | 'model' | 'deployment' | 'temperature'
 > & { is_private?: boolean };
 
 export type AgentSettingsFields = CreateAgentSettingsFields | UpdateAgentSettingsFields;

src/interfaces/assistants_web/src/components/UI/Slider.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { ChangeEvent, useEffect, useMemo } from 'react';
+
+import { InputLabel, Text } from '@/components/UI';
+import { cn } from '@/utils';
+
+type Props = {
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  onChange: (value: number) => void;
+  showTicks?: boolean;
+  sublabel?: string;
+  className?: string;
+  tooltipLabel?: React.ReactNode;
+  formatValue?: (value: number) => string;
+  tickDescriptor?: (tickValue: number) => string;
+};
+
+/**
+ *
+ * Renders a slider with a label, a minimum, maximum and step value, and optional subLabel and tooltip.
+ * Styling for the thumb is located in main.css
+ */
+export const Slider: React.FC<Props> = ({
+  label,
+  sublabel,
+  min,
+  max,
+  step,
+  value,
+  onChange,
+  tooltipLabel,
+  formatValue,
+  showTicks = false,
+  tickDescriptor,
+  className = '',
+}) => {
+  // if `max` is changed dynamically don't allow the value to surpass it
+  useEffect(() => {
+    if (value > max) onChange(Math.min(value, max));
+  }, [max, onChange, value]);
+
+  // if `min` is changed dynamically don't allow the value to go below it
+  useEffect(() => {
+    if (value < min) onChange(Math.max(value, min));
+  }, [min, onChange, value]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value);
+
+    onChange(value);
+  };
+
+  const ticks = useMemo(() => {
+    return Array.from({ length: (max - min) / step + 1 }, (_, i) => {
+      return i * step + min;
+    });
+  }, [max, min, step]);
+
+  return (
+    <div className={cn('flex flex-col space-y-4', className)}>
+      <div className="flex w-full items-center justify-between">
+        <InputLabel label={label} tooltipLabel={tooltipLabel} sublabel={sublabel} />
+        <Text>{formatValue ? formatValue(value) : value}</Text>
+      </div>
+      <div className="flex items-center">
+        <input
+          type="range"
+          value={value}
+          max={max}
+          min={min}
+          step={step}
+          onChange={handleChange}
+          className={cn(
+            'flex w-full cursor-pointer appearance-none items-center rounded-lg border outline-none active:cursor-grabbing',
+            'focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-4 focus-visible:outline-volcanic-100'
+          )}
+        />
+
+        {showTicks && (
+          <div className="absolute -z-10 flex w-full cursor-pointer justify-between">
+            {ticks.map((tick) => (
+              <span key={tick} className="h-2 w-2 rounded-full bg-black" />
+            ))}
+          </div>
+        )}
+      </div>
+      {tickDescriptor && (
+        <div className="flex w-full justify-between">
+          {ticks.map((tick) => (
+            <Text styleAs="caption" className="text-volcanic-400" key={tick}>
+              {tickDescriptor(tick)}
+            </Text>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/interfaces/assistants_web/src/components/UI/index.ts

@@ -24,6 +24,7 @@ export * from './RadioGroup';
 export * from './Shortcut';
 export * from './ShowStepsToggle';
 export * from './Skeleton';
+export * from './Slider';
 export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';

src/interfaces/assistants_web/src/constants/conversation.ts

@@ -3,6 +3,7 @@ import { FileAccept } from '@/components/UI';
 export const DEFAULT_CONVERSATION_NAME = 'New Conversation';
 export const DEFAULT_AGENT_MODEL = 'command-r-plus';
 export const DEFAULT_AGENT_ID = 'default';
+export const DEFAULT_AGENT_TEMPERATURE = 0.3;
 export const DEFAULT_TYPING_VELOCITY = 35;
 export const CONVERSATION_HISTORY_OFFSET = 100;