{"_id":"@crazydos/vue-llm-rich-message","_rev":"4-74a7b269681de06e98270217f6438a1d","name":"@crazydos/vue-llm-rich-message","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@crazydos/vue-llm-rich-message","type":"module","version":"0.1.0","description":"Vue component for insert component in llm message","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/shunnNet/vue-llm-rich-message.git"},"bugs":{"url":"https://github.com/shunnNet/vue-llm-rich-message/issues"},"keywords":["vue","markdown","unified","remark","rehype"],"author":{"name":"shunnNet"},"license":"MIT","engines":{"node":">=16.0.0"},"devDependencies":{"typescript":"^5.2.2"},"dependencies":{"@crazydos/vue-markdown":"^0.1.1","rehype-raw":"^6.1.1","remark-gfm":"^3.0.1","vue":"^3.3.4"},"gitHead":"53479a8e8c772c1ec0f7dc5f1389661054fb8a88","homepage":"https://github.com/shunnNet/vue-llm-rich-message#readme","_id":"@crazydos/vue-llm-rich-message@0.1.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-z4VLmJYAW6vavNlcOrvuBRNTgA9MCmb9qJZIyoFZV507b+HAjFJxAaj8q+c8TaMF7aYrXmjs8weXcEmLxmIgwg==","shasum":"1b34a8ace47eac018fc61875e719635cd8872189","tarball":"https://registry.npmjs.org/@crazydos/vue-llm-rich-message/-/vue-llm-rich-message-0.1.0.tgz","fileCount":19,"unpackedSize":275037,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBq3yGuFvcJh/1XvSWp3McK4GDboGCn0nKRqrqbktUOCAiBAJqDrhtiqZq/Ph9sbMifmpgfzLUq6QvzqJSmI34aVww=="}]},"_npmUser":{"name":"crazydos","email":"wendell20904102@gmail.com"},"directories":{},"maintainers":[{"name":"crazydos","email":"wendell20904102@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-llm-rich-message_0.1.0_1695925588289_0.6721782352452452"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.1":{"name":"@crazydos/vue-llm-rich-message","type":"module","version":"0.1.1","description":"Vue component for insert component in llm message","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/shunnNet/vue-llm-rich-message.git"},"bugs":{"url":"https://github.com/shunnNet/vue-llm-rich-message/issues"},"keywords":["vue","markdown","chatgpt","llm","remark","rehype"],"author":{"name":"shunnNet"},"license":"MIT","engines":{"node":">=16.0.0"},"devDependencies":{"typescript":"^5.2.2"},"dependencies":{"@crazydos/vue-markdown":"^0.1.1","rehype-raw":"^6.1.1","remark-gfm":"^3.0.1","vue":"^3.3.4"},"gitHead":"25959d1313d97ec8ef159ba0fb987e0e34937ea8","homepage":"https://github.com/shunnNet/vue-llm-rich-message#readme","_id":"@crazydos/vue-llm-rich-message@0.1.1","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-DcXfhimZ3kfHrHnJzKYPgLQzS0lBiCoLj1nUm9gjmkyII3qlz0bJYlCvjoBK4IS3Od6+/8a5qHkshyZ1mxjsMA==","shasum":"45b87035878d64ddcdba1ac2fafe10b37180a029","tarball":"https://registry.npmjs.org/@crazydos/vue-llm-rich-message/-/vue-llm-rich-message-0.1.1.tgz","fileCount":10,"unpackedSize":14903,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8W2ZIs2s6tGPAQIkPgntLclVHTLEAQ8KJNbqfMqeqNgIhALwrk5ny57vNS/ZcXtmc3F5wQubMDnidxCB2LKro+OU1"}]},"_npmUser":{"name":"crazydos","email":"wendell20904102@gmail.com"},"directories":{},"maintainers":[{"name":"crazydos","email":"wendell20904102@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-llm-rich-message_0.1.1_1695927233914_0.03344886053487417"},"_hasShrinkwrap":false},"0.2.0":{"name":"@crazydos/vue-llm-rich-message","type":"module","version":"0.2.0","description":"Vue component for insert component in llm message","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/shunnNet/vue-llm-rich-message.git"},"bugs":{"url":"https://github.com/shunnNet/vue-llm-rich-message/issues"},"keywords":["vue","markdown","chatgpt","llm","remark","rehype"],"author":{"name":"shunnNet"},"license":"MIT","engines":{"node":">=16.0.0"},"devDependencies":{"typescript":"^5.2.2"},"dependencies":{"@crazydos/vue-markdown":"^0.2.0","rehype-raw":"^6.1.1","remark-gfm":"^3.0.1","vue":"^3.3.4"},"gitHead":"131c21c83222b1df325906770ebefeca3d5fd201","homepage":"https://github.com/shunnNet/vue-llm-rich-message#readme","_id":"@crazydos/vue-llm-rich-message@0.2.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-oqAAuQ9HMB3NGcuxhZHAXA6mbPbMjCsy22wRR1jaPeHQ2SkBF12jed11OEoiSV8H8a5HkFhlzNBvwCmjymCgag==","shasum":"c7e8442d7d1d8f33968e343d130a75ce36508ba2","tarball":"https://registry.npmjs.org/@crazydos/vue-llm-rich-message/-/vue-llm-rich-message-0.2.0.tgz","fileCount":10,"unpackedSize":14422,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDneyzrySKyE/xa7ex/dCf4+b2zT8GOHoVRsUCeTR/pLAiBvWaI3R/BKEwnUWsmsfrGW20IwzUAegO4LOVmUKI7ugg=="}]},"_npmUser":{"name":"crazydos","email":"wendell20904102@gmail.com"},"directories":{},"maintainers":[{"name":"crazydos","email":"wendell20904102@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-llm-rich-message_0.2.0_1696818593744_0.8015357050807077"},"_hasShrinkwrap":false},"0.3.0":{"name":"@crazydos/vue-llm-rich-message","type":"module","version":"0.3.0","description":"Vue component for insert component in llm message","main":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/shunnNet/vue-llm-rich-message.git"},"bugs":{"url":"https://github.com/shunnNet/vue-llm-rich-message/issues"},"keywords":["vue","markdown","chatgpt","llm","remark","rehype"],"author":{"name":"shunnNet"},"license":"MIT","engines":{"node":">=18.16.0"},"devDependencies":{"@vitejs/plugin-vue":"^4.5.0","typescript":"^5.2.2","vite":"^5.0.0","vite-plugin-dts":"^3.6.4","vue-tsc":"^1.8.22"},"dependencies":{"@crazydos/vue-markdown":"^0.2.0","rehype-raw":"^6.1.1","remark-gfm":"^3.0.1","vue":"^3.3.8"},"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"homepage":"https://github.com/shunnNet/vue-llm-rich-message#readme","_id":"@crazydos/vue-llm-rich-message@0.3.0","_integrity":"sha512-tlQkhV7NRClCSMZfCCn0v3RIZCcE41EaMvyiGfphgLn+iJcbeYuAwIUBzNVM1/V/0l4vvKlEZE8kCFIVzw8aVQ==","_resolved":"/private/var/folders/1t/n8nmyhf15gd9x9p28_tjz1_m0000gn/T/4ecbf9134f8e17693b043be8b1b218be/crazydos-vue-llm-rich-message-0.3.0.tgz","_from":"file:crazydos-vue-llm-rich-message-0.3.0.tgz","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-tlQkhV7NRClCSMZfCCn0v3RIZCcE41EaMvyiGfphgLn+iJcbeYuAwIUBzNVM1/V/0l4vvKlEZE8kCFIVzw8aVQ==","shasum":"f124088f2aba5efdaf0c6c9523be7b9fa0d10253","tarball":"https://registry.npmjs.org/@crazydos/vue-llm-rich-message/-/vue-llm-rich-message-0.3.0.tgz","fileCount":7,"unpackedSize":838553,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD60RO5ywludkYBgz2jr5ub0UwCIWERiFN8ScIi64hv1AIgOTaBV77/vxJkmbvlY57FByf1eAMKFMljs2qonP+LT5c="}]},"_npmUser":{"name":"crazydos","email":"wendell20904102@gmail.com"},"directories":{},"maintainers":[{"name":"crazydos","email":"wendell20904102@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-llm-rich-message_0.3.0_1702021430914_0.1452250616062205"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-28T18:26:28.197Z","0.1.0":"2023-09-28T18:26:28.621Z","modified":"2023-12-08T07:43:51.362Z","0.1.1":"2023-09-28T18:53:54.063Z","0.2.0":"2023-10-09T02:29:53.934Z","0.3.0":"2023-12-08T07:43:51.191Z"},"maintainers":[{"name":"crazydos","email":"wendell20904102@gmail.com"}],"description":"Vue component for insert component in llm message","homepage":"https://github.com/shunnNet/vue-llm-rich-message#readme","keywords":["vue","markdown","chatgpt","llm","remark","rehype"],"repository":{"type":"git","url":"git+https://github.com/shunnNet/vue-llm-rich-message.git"},"author":{"name":"shunnNet"},"bugs":{"url":"https://github.com/shunnNet/vue-llm-rich-message/issues"},"license":"MIT","readme":"# @crazydos/vue-llm-rich-message\n雖然 `ChatGPT` 會生成 markdown 訊息，但是有時候我們會希望顯示更複雜、更客製化的內容。\n\n這個工具透過 [`vue-markdown`](https://github.com/shunnNet/vue-markdown) 提供 Vue 在 markdown 插入 slot 的能力，再達配格式化的 instruction，讓 LLM 生成的 markdown 顯示更多樣的內容。\n\n\n<img src=\"./example/example.png\" width=\"610\" height=\"629\" />\n\n## install\n```sh\nnpm i @crazydos/vue-llm-rich-message\n```\n\n## Usage\n這不是一體的套件，而是兩個工具的組合。所以以下使用實際的程式碼說明，請依序觀看 comment。\n\n```vue\n<script setup lang=\"ts\">\n// 1. `computeFormatHint` function and `ComponentMessage` component\nimport { computeFormatHint, ComponentMessage } from '@crazydos/vue-llm-rich-message'\n\nimport { ref } from 'vue'\nimport { openaiClient } from './fetch'\nimport ProductCardList from './components/ProductCardList.vue'\n\nconst content = ref(``)\n\n// 2. Prepare component info for system message instruction. LLM will insert 1 or more components in appropriate position base on conversation.\nconst slotContents = [\n  {\n    component: 'reservation-button',\n    \n    // 2-1: IMPORTANT: description is important. You need tell the LLM what this component will show or do.\n    // This can increase the possibility it put component in the right position.\n    description: 'A reservation button, click to reserve service, after click, it will show a calendar to select date',\n  },\n  {\n    component: 'service-card-list',\n    description: 'A card list show all home services',\n  },\n  { component: 'customer-service-button', description: 'A Button to call customer service to help.' },\n]\n\nconst productList = [\n  { title: 'House Cleaning Service', price: 1500, image: 'https://fakeimg.pl/300x200/' },\n  { title: 'Aircond Cleaning Service', price: 3600, image: 'https://fakeimg.pl/300x200/' },\n]\n\n// 3. Generate a component and format instruction for LLM\nconst formatInstruction = computeFormatHint(slotContents)\n\n// 4. IMPORTANT: Combine with your systemMessage (or if you don't need customize system message, only put formatInstruction is OK)\nconst systemMessage = `You are a customer service, you are talking to a customer who wants to reserve a service, please help him to reserve a service.\n\n${formatInstruction}\n`\n\nconst info = ref('')\nconst generate = () => {\n  info.value = 'loading...'\n\n  // 5. Call your llm endpoint\n  openaiClient('/chat/completions')\n    .post({\n      model: 'gpt-3.5-turbo',\n      temperature: 0,\n      messages: [\n        // 6. With your system message\n        { role: 'system', content: systemMessage },\n\n        { role: 'user', content: 'Introduce your services, and where to contact with when I have problem' },\n      ],\n    })\n    .json()\n    .then((res) => {\n      info.value = ''\n\n      // 7. Then, we save the response message \n      content.value = res.data.value.choices[0].message.content\n    })\n}\n\nconst handleReservation = () => {\n  window.alert('Reservation success')\n}\nconst handleCS = () => {\n  window.alert('Customer service success')\n}\n</script>\n\n<template>\n  <!-- 7. Pass llm markdown response to <ComponentMessage /> -->\n  <ComponentMessage :message=\"content\">\n\n    <!--8. \n      IMPORTANT: Then customize your slot/component. \n      slot name will be the same with the `component` you pass to `computeFormatHint`\n    -->\n    <template #service-card-list>\n      <ProductCardList :products=\"productList\" />\n    </template>\n    <template #reservation-button>\n      <button @click=\"handleReservation\">Reservation</button>\n    </template>\n    <template #customer-service-button>\n      <button @click=\"handleCS\">Customer Service</button>\n    </template>\n  </ComponentMessage>\n</template>\n```\n\n## Notice\n- 隨著版本迭代，LLM 可能會對相同的 prompt 做出不同的行為，不同的 LLM 對相同的 prompt 也會有不同反應。如果你認為這個工具的 prompt 總是不出現你想要的結果，你也可以參考 `prompt.ts` 的內容，自己寫一個。這個工具只有特別針對 ChatGPT 做處理過。\n- 為了增加準確度，建議將 `temperature` 調至 `0`\n- 提供過多的 component 選擇給 llm 可能會導致表現不好，你可以試試看放到幾個符合你的需求。\n\n## Setup example\n有提供一個 example 可以玩玩看，在 example 目錄裡。你需要有 OPENAI_API_KEY，並新增 `./example/.env`，在裡頭加上：\n\n```.env\nVITE_OPENAI_API_KEY=your_api_key\n```\n\n然後你需要\n\n```sh\nnpm install\n\nnpm run dev\n```\n\n然後用瀏覽器開啟 `http://localhost:5173`，並點擊 `generate` 按鈕。\n\n你會在 `./example/src/App.vue` 中看到 messages 的範例，你可以開關他們的註解，查看不同的結果。\n\n## reference\n- [`vue-markdown`](https://github.com/shunnNet/vue-markdown)","readmeFilename":"README.zh-tw.md"}