Merge branch 'master' into delFS

Author: Aniket-Engg

libs/remix-ui/remix-ai/src/lib/components/Default.tsx

@@ -1,22 +1,46 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import '../remix-ai.css'
-import { DefaultModels, GenerationParams, ChatHistory, HandleStreamResponse, HandleSimpleResponse } from '@remix/remix-ai-core';
+import { DefaultModels, GenerationParams, ChatHistory, HandleStreamResponse } from '@remix/remix-ai-core';
 import { ConversationStarter, StreamSend, StreamingAdapterObserver, useAiChatApi } from '@nlux/react';
 import { AiChat, useAsStreamAdapter, ChatItem } from '@nlux/react';
-import { JsonStreamParser } from '@remix/remix-ai-core';
 import { user, assistantAvatar } from './personas';
 import { highlighter } from '@nlux/highlighter'
 import './color.css'
 import '@nlux/themes/unstyled.css';
+import copy from 'copy-to-clipboard'
 
 export let ChatApi = null
 
 export const Default = (props) => {
+  const [is_streaming, setIS_streaming] = useState<boolean>(false)
+
+  const HandleCopyToClipboard = () => {
+    const markdown = document.getElementsByClassName('nlux-chatSegments-container')
+    if (markdown.length < 1) return
+
+    const codeBlocks = markdown[0].getElementsByClassName('code-block')
+    Array.from(codeBlocks).forEach((block) => {
+      const copyButtons = block.getElementsByClassName('nlux-comp-copyButton')
+      Array.from(copyButtons).forEach((cp_btn) => {
+        const hdlr = async () => {
+          copy(block.textContent)
+        }
+        cp_btn.removeEventListener('click', async() => { hdlr() })
+        cp_btn.addEventListener('click', async () => { hdlr() })
+      })
+    })
+  }
+
+  useEffect(() => {
+    HandleCopyToClipboard();
+  }, [is_streaming]);
+
   const send: StreamSend = async (
     prompt: string,
     observer: StreamingAdapterObserver,
   ) => {
     GenerationParams.stream_result = true
+    setIS_streaming(true)
     GenerationParams.return_stream_response = GenerationParams.stream_result
 
     let response = null
@@ -32,13 +56,15 @@ export const Default = (props) => {
         observer.next(' ') // Add a space to flush the last message
         ChatHistory.pushHistory(prompt, result)
         observer.complete()
+        setTimeout(() => { setIS_streaming(false) }, 1000)
       }
     )
     else {
       observer.next(response)
       observer.complete()
-    }
 
+      setTimeout(() => { setIS_streaming(false) }, 1000)
+    }
   };
   ChatApi = useAiChatApi();
   const conversationStarters: ConversationStarter[] = [
@@ -73,9 +99,9 @@ export const Default = (props) => {
         submitShortcut: 'Enter',
         hideStopButton: false,
       }}
-      messageOptions={{ showCodeBlockCopyButton: false,
+      messageOptions={{ showCodeBlockCopyButton: true,
         editableUserMessages: true,
-        streamingAnimationSpeed: 2,
+        streamingAnimationSpeed: 1,
         waitTimeBeforeStreamCompletion: 1000,
         syntaxHighlighter: highlighter
       }}