{"id":2836,"date":"2024-11-21T15:12:03","date_gmt":"2024-11-21T15:12:03","guid":{"rendered":"https:\/\/www.aisupersmart.com\/Question-Answer\/question\/how-to-dynamically-add-copy-text-functionality-in-vue-js-in-deep-chat-library\/"},"modified":"2024-11-21T15:12:03","modified_gmt":"2024-11-21T15:12:03","slug":"how-to-dynamically-add-copy-text-functionality-in-vue-js-in-deep-chat-library","status":"publish","type":"question","link":"https:\/\/www.aisupersmart.com\/Question-Answer\/question\/how-to-dynamically-add-copy-text-functionality-in-vue-js-in-deep-chat-library\/","title":{"rendered":"How to dynamically add copy text functionality in Vue.js in Deep chat library?"},"content":{"rendered":"
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n

I have this code inside my vue 3 app. I am using deep chat npm library\u00a0https:\/\/www.npmjs.com\/package\/deep-chat-react<\/a>\u00a0for integrating AI chat functionality. I am not able to figure out how can I add a copy button to the AI generated chat. I want on click of that button, user should be able to copy the text for that particular chat on the clipboard.<\/p>\n

Demo project link –\u00a0https:\/\/stackblitz.com\/edit\/deep-chat-vue3?file=src%2FApp.vue<\/a><\/p>\n

<deep-chat<\/span>\r\n  intro-message<\/span>='{\"text\": \"Hi I am your assistant, ask me anything!\"}'<\/span>\r\n  :history<\/span>=\"processedChatHistory\"<\/span>\r\n  :on-message<\/span>=\"message => handleNewMessage(message)\"<\/span>\r\n  microphone<\/span>=\"true\"<\/span>\r\n  auxiliary-style<\/span>=\"\r\n  ::-webkit-scrollbar {\r\n    width: 10px;\r\n    height: 10px;\r\n  }\r\n  ::-webkit-scrollbar-thumb {\r\n    background-color: #54a7ff;\r\n    border-radius: 5px;\r\n  }\"<\/span>\r\n  class<\/span>=\"deep-chat\"<\/span>\r\n  :direct-connection<\/span>=\"{\r\n    openAI: {\r\n      key: openAiKey,\r\n      validateKeyProperty: true,\r\n      chat: { system_prompt: 'Assist me with anything you can' }\r\n    }\r\n  }\"<\/span>\r\n  :input-area-style<\/span>=\"{ backgroundColor: '#ebf5ff' }\"<\/span>\r\n><\/span>\r\n  <div<\/span>\r\n    style<\/span>=\"\r\n      width: 350px;\r\n      background-color: #fafafa;\r\n      border-radius: 10px;\r\n      padding: 12px;\r\n      padding-bottom: 15px;\r\n      display: none;\r\n    \"<\/span>\r\n  ><\/span>\r\n    <div<\/span>><\/span>\r\n      <div<\/span>\r\n        style<\/span>=\"\r\n          text-align: center;\r\n          margin-bottom: 15 px;\r\n          color: #444;\r\n          font-size: 12 px;\r\n        \"<\/span>\r\n      ><\/span>\r\n        <b<\/span>><\/span>AI-Powered Package Suggestions<\/b<\/span>><\/span>\r\n      <\/div<\/span>><\/span>\r\n      <div<\/span>\r\n        style<\/span>=\"\r\n          font-size: 12 px;\r\n          font-weight: 300;\r\n          text-align: center;\r\n          color: #bbb;\r\n          line-height: 20 px;\r\n        \"<\/span>\r\n      ><\/span>\r\n        Our AI Assistance tool helps you design and customize dynamic packages\r\n        effortlessly\r\n      <\/div<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n<\/deep-chat<\/span>><\/span>\r\n<\/code><\/pre>\n
const<\/span> deepChatHistory = ref<\/span>([]);\r\n\r\nconst<\/span> handleNewMessage<\/span>=(event<\/span>)=> {\r\n  if<\/span>(event?.detail<\/span>?.message<\/span> && !event?.detail<\/span>?.isInitial<\/span>){\r\n    deepChatHistory.value<\/span>.push<\/span>(event?.detail<\/span>?.message<\/span>);\r\n  }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","question-category":[87],"question_tags":[82],"class_list":["post-2836","question","type-question","status-publish","hentry","question-category-coding","question_tags-coding"],"_links":{"self":[{"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/question\/2836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/question"}],"about":[{"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/types\/question"}],"author":[{"embeddable":true,"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/comments?post=2836"}],"wp:attachment":[{"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/media?parent=2836"}],"wp:term":[{"taxonomy":"question-category","embeddable":true,"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/question-category?post=2836"},{"taxonomy":"question_tags","embeddable":true,"href":"https:\/\/www.aisupersmart.com\/Question-Answer\/wp-json\/wp\/v2\/question_tags?post=2836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}