From 6a3b438558be1a07b77417ac0dc035882f8cdcdc Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 19 Aug 2024 15:40:41 +0700
Subject: [PATCH] feat: enable copy instruction (#3401)

---
 web/containers/CopyInstruction/index.tsx      | 38 +++++++++++++++++++
 web/hooks/useCreateNewThread.ts               | 12 +++++-
 web/screens/Thread/ThreadRightPanel/index.tsx |  2 +
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 web/containers/CopyInstruction/index.tsx

diff --git a/web/containers/CopyInstruction/index.tsx b/web/containers/CopyInstruction/index.tsx
new file mode 100644
index 000000000..227e0b240
--- /dev/null
+++ b/web/containers/CopyInstruction/index.tsx
@@ -0,0 +1,38 @@
+import { ChangeEvent, useCallback } from 'react'
+
+import { Switch } from '@janhq/joi'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+const COPY_OVER_INSTRUCTION_ENABLED = 'copy_over_instruction_enabled'
+
+export const copyOverInstructionEnabledAtom = atomWithStorage(
+  COPY_OVER_INSTRUCTION_ENABLED,
+  false
+)
+
+const CopyOverInstruction: React.FC = () => {
+  const [copyOverInstructionEnabled, setCopyOverInstructionEnabled] = useAtom(
+    copyOverInstructionEnabledAtom
+  )
+
+  const onSwitchToggled = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setCopyOverInstructionEnabled(e.target.checked)
+    },
+    [setCopyOverInstructionEnabled]
+  )
+
+  return (
+    <div className="my-2 flex w-full flex-row items-center justify-center gap-x-2">
+      <h6 className="flex-1 font-medium">Save instructions for new threads</h6>
+      <Switch
+        checked={copyOverInstructionEnabled}
+        onChange={onSwitchToggled}
+        className="flex-shrink-0"
+      />
+    </div>
+  )
+}
+
+export default CopyOverInstruction
diff --git a/web/hooks/useCreateNewThread.ts b/web/hooks/useCreateNewThread.ts
index 5a1a32cb1..03c3edf90 100644
--- a/web/hooks/useCreateNewThread.ts
+++ b/web/hooks/useCreateNewThread.ts
@@ -12,6 +12,7 @@ import {
 } from '@janhq/core'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 
+import { copyOverInstructionEnabledAtom } from '@/containers/CopyInstruction'
 import { fileUploadAtom } from '@/containers/Providers/Jotai'
 
 import { generateThreadId } from '@/utils/thread'
@@ -31,6 +32,7 @@ import {
   updateThreadAtom,
   setThreadModelParamsAtom,
   isGeneratingResponseAtom,
+  activeThreadAtom,
 } from '@/helpers/atoms/Thread.atom'
 
 const createNewThreadAtom = atom(null, (get, set, newThread: Thread) => {
@@ -57,6 +59,10 @@ export const useCreateNewThread = () => {
   const setFileUpload = useSetAtom(fileUploadAtom)
   const setSelectedModel = useSetAtom(selectedModelAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
+  const copyOverInstructionEnabled = useAtomValue(
+    copyOverInstructionEnabledAtom
+  )
+  const activeThread = useAtomValue(activeThreadAtom)
 
   const experimentalEnabled = useAtomValue(experimentalFeatureEnabledAtom)
   const setIsGeneratingResponse = useSetAtom(isGeneratingResponseAtom)
@@ -105,6 +111,10 @@ export const useCreateNewThread = () => {
         : {}
 
     const createdAt = Date.now()
+    let instructions: string | undefined = undefined
+    if (copyOverInstructionEnabled) {
+      instructions = activeThread?.assistants[0]?.instructions ?? undefined
+    }
     const assistantInfo: ThreadAssistantInfo = {
       assistant_id: assistant.id,
       assistant_name: assistant.name,
@@ -116,7 +126,7 @@ export const useCreateNewThread = () => {
           { ...defaultModel?.parameters, ...overriddenParameters } ?? {},
         engine: defaultModel?.engine,
       },
-      instructions: assistant.instructions,
+      instructions,
     }
 
     const threadId = generateThreadId(assistant.id)
diff --git a/web/screens/Thread/ThreadRightPanel/index.tsx b/web/screens/Thread/ThreadRightPanel/index.tsx
index 1e9304cb4..7a1a08c8a 100644
--- a/web/screens/Thread/ThreadRightPanel/index.tsx
+++ b/web/screens/Thread/ThreadRightPanel/index.tsx
@@ -14,6 +14,7 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 import { Settings2Icon } from 'lucide-react'
 
+import CopyOverInstruction from '@/containers/CopyInstruction'
 import EngineSetting from '@/containers/EngineSetting'
 import ModelDropdown from '@/containers/ModelDropdown'
 
@@ -212,6 +213,7 @@ const ThreadRightPanel = () => {
                 onChange={onAssistantInstructionChanged}
               />
             </div>
+            {experimentalFeature && <CopyOverInstruction />}
             <div>
               <label
                 id="assistant-instructions"