Feature request: Adding temperature as parameter (#513)

* Adding temperature as parameter

* NEXT_PUBLIC_ prefix added

* add spacing

---------

Co-authored-by: Ivan Fioravanti <>
Co-authored-by: Mckay Wrigley <mckaywrigley@gmail.com>

components/Chat/Chat.tsx

@@ -32,6 +32,7 @@ import { ChatMessage } from './ChatMessage';
 import { ErrorMessageDiv } from './ErrorMessageDiv';
 import { ModelSelect } from './ModelSelect';
 import { SystemPrompt } from './SystemPrompt';
+import { TemperatureSlider } from './Temperature';
 
 interface Props {
   stopConversationRef: MutableRefObject<boolean>;
@@ -97,6 +98,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
           messages: updatedConversation.messages,
           key: apiKey,
           prompt: updatedConversation.prompt,
+          temperature: updatedConversation.temperature
         };
         const endpoint = getEndpoint(plugin);
         let body;
@@ -421,6 +423,16 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
                           })
                         }
                       />
+
+                      <TemperatureSlider
+                          label="Temperature"
+                          onChangeTemperature={(temperature) =>
+                            handleUpdateConversation(selectedConversation, {
+                              key: 'temperature',
+                              value: temperature,
+                            })
+                          }
+                        />
                     </div>
                   )}
                 </div>

components/Chat/Temperature.tsx

@@ -0,0 +1,57 @@
+import { FC, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { DEFAULT_TEMPERATURE } from '@/utils/app/const';
+
+interface Props {
+  label: string;
+  onChangeTemperature: (temperature: number) => void;
+}
+
+export const TemperatureSlider: FC<Props> = ({
+  label,
+  onChangeTemperature,
+}) => {
+  const [temperature, setTemperature] = useState(DEFAULT_TEMPERATURE);
+  const { t } = useTranslation('chat');
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(event.target.value);
+    setTemperature(newValue);
+    onChangeTemperature(newValue);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
+        {label}
+      </label>
+      <span className="text-[12px] text-black/50 dark:text-white/50 text-sm">
+        {t(
+          'Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.',
+        )}
+      </span>
+      <span className="mt-2 mb-1 text-center">{temperature.toFixed(1)}</span>
+      <input
+        className="cursor-pointer"
+        type="range"
+        min={0}
+        max={1}
+        step={0.1}
+        value={temperature}
+        onChange={handleChange}
+      />
+      <ul className="w mt-2 pb-8 flex justify-between px-[24px]">
+        <li className="relative flex justify-center">
+          <span className="absolute">{t('Precise')}</span>
+        </li>
+        <li className="relative flex justify-center">
+          <span className="absolute">{t('Neutral')}</span>
+        </li>
+        <li className="relative flex justify-center">
+          <span className="absolute">{t('Creative')}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};

components/Chatbar/Chatbar.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next';
 
 import { useCreateReducer } from '@/hooks/useCreateReducer';
 
-import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
 import { saveConversation, saveConversations } from '@/utils/app/conversation';
 import { saveFolders } from '@/utils/app/folders';
 import { exportData, importData } from '@/utils/app/importExport';
@@ -119,6 +119,7 @@ export const Chatbar = () => {
           messages: [],
           model: OpenAIModels[defaultModelId],
           prompt: DEFAULT_SYSTEM_PROMPT,
+          temperature: DEFAULT_TEMPERATURE,
           folderId: null,
         },
       });
@@ -160,6 +161,7 @@ export const Chatbar = () => {
             messages: [],
             model: OpenAIModels[defaultModelId],
             prompt: DEFAULT_SYSTEM_PROMPT,
+            temperature: DEFAULT_TEMPERATURE,
             folderId: null,
           },
         });