{"id":96205,"date":"2025-02-06T03:43:42","date_gmt":"2025-02-06T00:13:42","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/"},"modified":"2025-02-06T03:43:42","modified_gmt":"2025-02-06T00:13:42","slug":"%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/","title":{"rendered":"\u06cc\u06a9 \u0686\u062a \u0628\u0627\u0628\u0627\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 NextJs \u060c Groq \u0648 Llama"},"content":{"rendered":"<div data-article-id=\"2261211\" id=\"article-body\">\n<p>\u0627\u06cc\u0646 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u062a\u0648\u0636\u06cc\u062d \u0645\u0641\u0635\u0644\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u06cc\u06a9 \u0686\u062a \u0628\u0627\u0628\u0627\u062a AI \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <strong>\u0628\u0639\u062f. js<\/strong>\u0628\u0627 <strong>\u06af\u0644\u0647<\/strong>\u060c \u0648 <strong>\u0644\u0644\u0627\u0645\u0627<\/strong> \u0645\u062f\u0644 \u0632\u0628\u0627\u0646. Chatbot \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u062d\u0648\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u062c\u0645\u0644\u0647 \u062f\u0627\u0646\u0634\u06af\u0627\u0647\u06cc\u0627\u0646 \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<hr\/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%A7%D8%B5%D9%84%DB%8C\" >\u0627\u062c\u0632\u0627\u06cc \u0627\u0635\u0644\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#API_%D8%B3%D9%85%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\" >API \u0633\u0645\u062a \u0633\u0631\u0648\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D8%B1%D8%A7%D8%A8%D8%B7_%D8%B3%D9%85%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C\" >\u0631\u0627\u0628\u0637 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%DA%A9%D8%AF\" >\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%DA%A9%D8%AF_%D8%B3%D9%85%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\" >\u06a9\u062f \u0633\u0645\u062a \u0633\u0631\u0648\u0631<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D8%AA%D9%88%D8%B6%DB%8C%D8%AD\" >\u062a\u0648\u0636\u06cc\u062d:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%DA%A9%D8%AF_%D8%B3%D9%85%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C\" >\u06a9\u062f \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-2\" >\u062a\u0648\u0636\u06cc\u062d:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\" >\u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%88_%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7%DB%8C\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%db%8c%da%a9-%da%86%d8%aa-%d8%a8%d8%a7%d8%a8%d8%a7%d8%aa-%d9%87%d9%88%d8%b4-%d9%85%d8%b5%d9%86%d9%88%d8%b9%db%8c-%d8%a8%d8%a7-nextjs-%d8%8c-groq-%d9%88-llama\/#%DA%AF%D8%A7%D9%85\" >\u06af\u0627\u0645<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\u0645\u0642\u062f\u0645\u0647<\/li>\n<li>\n<p>\u0627\u062c\u0632\u0627\u06cc \u0627\u0635\u0644\u06cc<\/p>\n<\/li>\n<li>\n<p>\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f<\/p>\n<\/li>\n<li>\u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AI chatbot \u0642\u062f\u0631\u062a \u0627\u0632 \u0642\u062f\u0631\u062a <strong>\u0644\u0644\u0627\u0645\u0627<\/strong> (\u06cc\u06a9 \u0645\u062f\u0644 \u0632\u0628\u0627\u0646 \u0628\u0632\u0631\u06af) \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u0627\u0633\u062e \u0647\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <strong>\u06af\u0644\u0647<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0628\u0627\u0637\u0646 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062f\u0644 Llama \u0648 <strong>\u0628\u0639\u062f. js<\/strong> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u062c\u0644\u0648\u06cc \u0648 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0627 \u0647\u0645 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647. Chatbot \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u060c \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0628\u0627\u0634\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%A7%D8%B5%D9%84%DB%8C\"><\/span>\n<p>  \u0627\u062c\u0632\u0627\u06cc \u0627\u0635\u0644\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"API_%D8%B3%D9%85%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\"><\/span>\n<p>  API \u0633\u0645\u062a \u0633\u0631\u0648\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>API \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u060c \u067e\u06cc\u0627\u0645 \u0647\u0627 \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0628\u0627 \u0633\u0631\u0648\u06cc\u0633 Groq \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0631\u062f \u0648 \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0632 \u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D8%A8%D8%B7_%D8%B3%D9%85%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C\"><\/span>\n<p>  \u0631\u0627\u0628\u0637 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0631\u0627\u0628\u0637 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc React \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u06cc\u06a9 UI \u062a\u0645\u06cc\u0632 \u0648 \u0628\u0635\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 chatbot \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062c\u0631\u06cc\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u067e\u0627\u0633\u062e \u0647\u0627 \u060c \u062a\u0627\u0631\u06cc\u062e \u067e\u06cc\u0627\u0645 \u0648 \u0637\u0631\u0627\u062d\u06cc \u0628\u0631\u0627\u0642 \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%DA%A9%D8%AF\"><\/span>\n<p>  \u062a\u0648\u0636\u06cc\u062d \u06a9\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D8%B3%D9%85%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\"><\/span>\n<p>  \u06a9\u062f \u0633\u0645\u062a \u0633\u0631\u0648\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u06a9\u062f \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0645\u0633\u0626\u0648\u0644 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0686\u062a \u0648 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0633\u0631\u0648\u06cc\u0633 Groq \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Groq<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">groq-sdk<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">groq<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Groq<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">apiKey<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_GROQ_API_KEY<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">systemPrompt<\/span> <span class=\"o\">=<\/span> \n  <span class=\"dl\">\"<\/span><span class=\"s2\">You are a friendly and knowledgeable academic assistant, <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">coding assistant and a teacher of anything related to AI and Machine Learning. <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">Your role is to help users with anything related to academics, <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">provide detailed explanations, and support learning across various domains.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">request<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">messages<\/span><span class=\"p\">,<\/span> <span class=\"nx\">msg<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">request<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ Safely handle undefined or null messages<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">processedMessages<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">messages<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"nf\">isArray<\/span><span class=\"p\">(<\/span><span class=\"nx\">messages<\/span><span class=\"p\">)<\/span> \n      <span class=\"p\">?<\/span> <span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nf\">reduce<\/span><span class=\"p\">((<\/span><span class=\"nx\">acc<\/span><span class=\"p\">,<\/span> <span class=\"nx\">m<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">m<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">parts<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">parts<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">parts<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">text<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">acc<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">({<\/span>\n              <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">role<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">model<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">assistant<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n              <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">m<\/span><span class=\"p\">.<\/span><span class=\"nx\">parts<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">text<\/span>\n            <span class=\"p\">});<\/span>\n          <span class=\"p\">}<\/span>\n          <span class=\"k\">return<\/span> <span class=\"nx\">acc<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\n      <span class=\"p\">:<\/span> <span class=\"p\">[];<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">enhancedMessages<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">system<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">systemPrompt<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">...<\/span><span class=\"nx\">processedMessages<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">msg<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">];<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">stream<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">groq<\/span><span class=\"p\">.<\/span><span class=\"nx\">chat<\/span><span class=\"p\">.<\/span><span class=\"nx\">completions<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">messages<\/span><span class=\"p\">:<\/span> <span class=\"nx\">enhancedMessages<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">model<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">llama3-8b-8192<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Choose your preferred model<\/span>\n      <span class=\"na\">stream<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">max_tokens<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1024<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">temperature<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.7<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Create a custom readable stream to parse the chunks<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">responseStream<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">ReadableStream<\/span><span class=\"p\">({<\/span>\n      <span class=\"k\">async<\/span> <span class=\"nf\">start<\/span><span class=\"p\">(<\/span><span class=\"nx\">controller<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">encoder<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">TextEncoder<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">for<\/span> <span class=\"k\">await <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">chunk<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">content<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">chunk<\/span><span class=\"p\">.<\/span><span class=\"nx\">choices<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]?.<\/span><span class=\"nx\">delta<\/span><span class=\"p\">?.<\/span><span class=\"nx\">content<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">content<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">controller<\/span><span class=\"p\">.<\/span><span class=\"nf\">enqueue<\/span><span class=\"p\">(<\/span><span class=\"nx\">encoder<\/span><span class=\"p\">.<\/span><span class=\"nf\">encode<\/span><span class=\"p\">(<\/span><span class=\"nx\">content<\/span><span class=\"p\">));<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Streaming error:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n          <span class=\"nx\">controller<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">controller<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">();<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"nx\">responseStream<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error in chat API:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Response<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span> \n      <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">An error occurred processing your request<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">details<\/span><span class=\"p\">:<\/span> <span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span> \n    <span class=\"p\">}),<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"mi\">500<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B6%DB%8C%D8%AD\"><\/span>\n<p>  \u062a\u0648\u0636\u06cc\u062d:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li>\n<p><strong>\u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0648\u0627\u0631\u062f\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\n<code>Groq<\/code>  \u0627\u0632 <code>groq-sdk<\/code> \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0633\u0631\u0648\u06cc\u0633 Groq.<\/li>\n<li>\u062f\u0631 <code>POST<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc HTTP \u0648\u0631\u0648\u062f\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0641\u0648\u0631\u06cc \u0633\u06cc\u0633\u062a\u0645<\/strong>:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u0633\u0631\u06cc\u0639 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0632 \u067e\u06cc\u0634 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0647\u062f\u0627\u06cc\u062a \u0631\u0641\u062a\u0627\u0631 \u0645\u062f\u0644 Llama \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 chatbot \u0645\u0641\u06cc\u062f \u0648 \u0622\u06af\u0627\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0627<\/strong>:<\/p>\n<ul>\n<li>\u062f\u0631 <code>messages<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u0634\u0648\u062f. \u0647\u0631 \u067e\u06cc\u0627\u0645 \u0628\u0647 \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 API GRAC \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645 \u0647\u0627<\/strong>:<\/p>\n<ul>\n<li>\u0633\u0631\u06cc\u0639 \u0633\u06cc\u0633\u062a\u0645 \u0628\u0647 \u0644\u06cc\u0633\u062a \u067e\u06cc\u0627\u0645 \u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0622\u0646 \u0622\u062e\u0631\u06cc\u0646 \u067e\u06cc\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0627\u06cc\u062c\u0627\u062f \u062c\u0631\u06cc\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644<\/strong>:<\/p>\n<ul>\n<li>\u062f\u0631 <code>groq.chat.completions.create<\/code> \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u0627\u0633\u062e \u0627\u0632 \u0645\u062f\u0644 Llama \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u067e\u0627\u0633\u062e \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0632 \u0645\u06cc \u06af\u0631\u062f\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u062c\u0631\u06cc\u0627\u0646 \u0642\u0627\u0628\u0644 \u062e\u0648\u0627\u0646\u062f\u0646<\/strong>:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u0639\u0631\u0641 <code>ReadableStream<\/code> \u0628\u0631\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u067e\u0627\u0633\u062e \u067e\u062e\u0634 \u0634\u062f\u0647 \u0648 \u0627\u0631\u0633\u0627\u0644 \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627<\/strong>:<\/p>\n<ul>\n<li>\u062e\u0637\u0627\u0647\u0627 \u062f\u0631 \u0637\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f \u06af\u0631\u0641\u062a\u0627\u0631 \u0648 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u067e\u0627\u0633\u062e \u062e\u0637\u0627\u06cc \u0645\u0646\u0627\u0633\u0628\u06cc \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D8%B3%D9%85%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C\"><\/span>\n<p>  \u06a9\u062f \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u06a9\u062f \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0631\u0627\u0628\u0637 \u0686\u062a \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Textarea<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/ui\/textarea<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/ui\/button<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ScrollArea<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/ui\/scroll-area<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Send<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Bot<\/span><span class=\"p\">,<\/span> <span class=\"nx\">User<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Zap<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">lucide-react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactMarkdown<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-markdown<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">ChatInterface<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">messages<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setMessages<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([<\/span>\n    <span class=\"p\">{<\/span>\n      <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">model<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">parts<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Hello! I'm ready to assist you. What would you like to explore today?<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}],<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">]);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">message<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setMessage<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isLoading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">messagesEndRef<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">scrollToBottom<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">messagesEndRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">scrollIntoView<\/span><span class=\"p\">({<\/span> <span class=\"na\">behavior<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">smooth<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">});<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">scrollToBottom<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">messages<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">sendMessage<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">()<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">isLoading<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"nf\">setIsLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nf\">setMessages<\/span><span class=\"p\">((<\/span><span class=\"nx\">messages<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">[<\/span>\n      <span class=\"p\">...<\/span><span class=\"nx\">messages<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">parts<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"nx\">message<\/span> <span class=\"p\">}]<\/span> <span class=\"p\">},<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">model<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">parts<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span> <span class=\"p\">}]<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">]);<\/span>\n\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/chat<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">POST<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Content-Type<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">application\/json<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n        <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">history<\/span><span class=\"p\">:<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">messages<\/span><span class=\"p\">],<\/span>\n          <span class=\"na\">msg<\/span><span class=\"p\">:<\/span> <span class=\"nx\">message<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}),<\/span>\n      <span class=\"p\">});<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Network response was not ok<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">reader<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nf\">getReader<\/span><span class=\"p\">();<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">decoder<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">TextDecoder<\/span><span class=\"p\">();<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">fullResponse<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"k\">while <\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">done<\/span><span class=\"p\">,<\/span> <span class=\"nx\">value<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">reader<\/span><span class=\"p\">.<\/span><span class=\"nf\">read<\/span><span class=\"p\">();<\/span>\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">done<\/span><span class=\"p\">)<\/span> <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"kd\">const<\/span> <span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">decoder<\/span><span class=\"p\">.<\/span><span class=\"nf\">decode<\/span><span class=\"p\">(<\/span><span class=\"nx\">value<\/span> <span class=\"o\">||<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Uint8Array<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span> <span class=\"na\">stream<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">});<\/span>\n          <span class=\"nx\">fullResponse<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">text<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"nf\">setMessages<\/span><span class=\"p\">((<\/span><span class=\"nx\">messages<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">lastMessage<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">messages<\/span><span class=\"p\">[<\/span><span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">];<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">otherMessages<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n            <span class=\"k\">return<\/span> <span class=\"p\">[<\/span>\n              <span class=\"p\">...<\/span><span class=\"nx\">otherMessages<\/span><span class=\"p\">,<\/span>\n              <span class=\"p\">{<\/span>\n                <span class=\"p\">...<\/span><span class=\"nx\">lastMessage<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">parts<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"nx\">fullResponse<\/span> <span class=\"p\">}],<\/span>\n              <span class=\"p\">},<\/span>\n            <span class=\"p\">];<\/span>\n          <span class=\"p\">});<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">setMessages<\/span><span class=\"p\">((<\/span><span class=\"nx\">messages<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">[<\/span>\n        <span class=\"p\">...<\/span><span class=\"nx\">messages<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">{<\/span>\n          <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">model<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">parts<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Apologies, an unexpected error occurred. Please try again.<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}],<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">]);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nf\">setIsLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleKeyPress<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">key<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Enter<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">shiftKey<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n      <span class=\"nf\">sendMessage<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">min-h-screen bg-[#1C1C1E] flex items-center justify-center p-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full max-w-4xl bg-[#2C2C2E] rounded-2xl shadow-2xl border border-[#3A3A3C] overflow-hidden<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"cm\">\/* Header *\/<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-[#3A3A3C] p-4 md:p-6 flex justify-between items-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-3<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-[#4A4A4C] p-2 rounded-full<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">Zap<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-6 h-6 text-[#5E5CE6]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xl md:text-2xl font-bold text-white<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">AI<\/span> <span class=\"nx\">Companion<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n        <span class=\"p\">{<\/span><span class=\"cm\">\/* Chat Area *\/<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-4 md:p-6 flex flex-col h-[75vh]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">ScrollArea<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-grow mb-4 pr-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">space-y-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"p\">{<\/span><span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">message<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n                  <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">index<\/span><span class=\"p\">}<\/span>\n                  <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`flex items-start <\/span><span class=\"p\">${<\/span>\n                    <span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">role<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">justify-end<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">justify-start<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n                <span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n                    <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`flex gap-3 max-w-[85%] md:max-w-[75%] <\/span><span class=\"p\">${<\/span>\n                      <span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">role<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">flex-row-reverse<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">flex-row<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n                  <span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-[#3A3A3C]<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">role<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-5 w-5 text-[#5E5CE6]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                      <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">Bot<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-5 w-5 text-[#5E5CE6]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                      <span class=\"p\">)}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>                    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n                      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`rounded-2xl px-4 py-3 shadow-lg <\/span><span class=\"p\">${<\/span>\n                        <span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">role<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">user<\/span><span class=\"dl\">\"<\/span>\n                          <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bg-[#5E5CE6] text-white<\/span><span class=\"dl\">\"<\/span>\n                          <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bg-[#3A3A3C] text-white<\/span><span class=\"dl\">\"<\/span>\n                      <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&gt;<\/span>\n                      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">prose prose-invert max-w-none<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">ReactMarkdown<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">parts<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/ReactMarkdown<\/span><span class=\"err\">&gt;\n<\/span>                      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"p\">))}<\/span>\n              <span class=\"p\">{<\/span><span class=\"nx\">isLoading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex justify-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">animate-pulse rounded-full h-8 w-8 bg-[#5E5CE6]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"p\">)}<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">messagesEndRef<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ScrollArea<\/span><span class=\"err\">&gt;\n<\/span>\n          <span class=\"p\">{<\/span><span class=\"cm\">\/* Input Area *\/<\/span><span class=\"p\">}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex gap-3 mt-auto<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Textarea<\/span>\n              <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setMessage<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n              <span class=\"nx\">onKeyDown<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleKeyPress<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Type your message...<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-[40px] text-white bg-[#3A3A3C] border-gray-100 focus:border-blue-200 resize-none rounded-xl<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">disabled<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">isLoading<\/span><span class=\"p\">}<\/span>\n            <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span>\n              <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">icon<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-[60px] w-[60px] bg-[#5E5CE6] hover:bg-[#4B3FD6] rounded-xl transition-all duration-300 ease-in-out transform hover:scale-105<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">sendMessage<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">disabled<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">()<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">isLoading<\/span><span class=\"p\">}<\/span>\n            <span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">Send<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-5 w-5 text-white<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Button<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">ChatInterface<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-2\"><\/span>\n<p>  \u062a\u0648\u0636\u06cc\u062d:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li>\n<p><strong>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a<\/strong>:<\/p>\n<ul>\n<li>\n<code>messages<\/code>: \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u06a9\u0627\u0644\u0645\u0647 \u0631\u0627 \u0628\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0648 chatbot \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>message<\/code>: \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/li>\n<li>\n<code>isLoading<\/code>: \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0622\u06cc\u0627 chatbot \u067e\u0627\u0633\u062e\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06cc\u0627 \u062e\u06cc\u0631.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0645\u0627\u06cc\u0634<\/strong>:<\/p>\n<ul>\n<li>\u062f\u0631 <code>scrollToBottom<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u067e\u06cc\u0627\u0645 \u062c\u062f\u06cc\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u062f \u060c \u0645\u0646\u0637\u0642\u0647 \u0686\u062a \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc \u0631\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645<\/strong>:<\/p>\n<ul>\n<li>\u062f\u0631 <code>sendMessage<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u06cc\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0645\u0627\u0633 API \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u06a9\u0627\u0644\u0645\u0647 \u0631\u0627 \u0628\u0627 \u067e\u0627\u0633\u062e \u0631\u0628\u0627\u062a \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u062c\u0631\u06cc\u0627\u0646 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u067e\u0627\u0633\u062e \u0627\u0632 \u0633\u0631\u0648\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u067e\u062e\u0634 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0631\u0627\u0628\u0637 \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f \u0632\u06cc\u0631\u0627 \u0631\u0628\u0627\u062a \u067e\u0627\u0633\u062e \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0627\u062c\u0632\u0627\u06cc UI<\/strong>:<\/p>\n<ul>\n<li>\u0631\u0627\u0628\u0637 \u06af\u067e \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0647\u062f\u0631 \u060c \u06cc\u06a9 \u0645\u0646\u0637\u0642\u0647 \u0686\u062a \u0642\u0627\u0628\u0644 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0648 \u06cc\u06a9 \u0645\u0646\u0637\u0642\u0647 \u0648\u0631\u0648\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0627\u0633\u062a.<\/li>\n<li>\u0646\u0645\u0627\u062f\u0647\u0627 (<code>User<\/code>\u0628\u0627 <code>Bot<\/code>\u0628\u0627 <code>Zap<\/code>\u0628\u0627 <code>Send<\/code>) \u0628\u0631\u0627\u06cc \u062a\u0642\u0648\u06cc\u062a \u062c\u0630\u0627\u0628\u06cc\u062a \u0628\u0635\u0631\u06cc \u0648 \u0627\u0631\u0627\u0626\u0647 \u0634\u0627\u062e\u0635 \u0647\u0627\u06cc \u0631\u0648\u0634\u0646\u06cc \u0627\u0632 \u0635\u062d\u0628\u062a \u06a9\u0631\u062f\u0646 \u0686\u0647 \u06a9\u0633\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627<\/strong>:<\/p>\n<ul>\n<li>\u0627\u06af\u0631 \u062e\u0637\u0627\u06cc\u06cc \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u0645\u0627\u0633 API \u0631\u062e \u062f\u0647\u062f \u060c chatbot \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627\u06cc \u0645\u0646\u0627\u0633\u0628 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\n<p><strong>\u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631<\/strong>:<\/p>\n<ul>\n<li>\u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0648\u0631\u0648\u062f\u06cc \u062a\u0627\u06cc\u067e \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u0627 \u0628\u0627 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646 \u062f\u06a9\u0645\u0647 &#8220;\u0627\u0631\u0633\u0627\u0644&#8221; \u06cc\u0627 \u0636\u0631\u0628\u0647 \u0632\u062f\u0646 \u0628\u0647 \u06a9\u0644\u06cc\u062f Enter \u060c \u0622\u0646 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u067e\u0631\u062f\u0627\u0632\u0634 \u0633\u0631\u0648\u0631<\/strong>:<\/p>\n<ul>\n<li>\u0633\u0631\u0648\u0631 \u067e\u06cc\u0627\u0645 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u060c \u0622\u0646 \u0631\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u062a\u06a9\u0645\u06cc\u0644 \u0628\u0647 \u0633\u0631\u0648\u06cc\u0633 Groq \u0645\u06cc \u0641\u0631\u0633\u062a\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u062c\u0631\u06cc\u0627\u0646 \u067e\u0627\u0633\u062e<\/strong>:<\/p>\n<ul>\n<li>\u067e\u0627\u0633\u062e \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0628\u0627\u0632 \u0645\u06cc \u06af\u0631\u062f\u062f \u0648 \u0631\u0627\u0628\u0637 \u0686\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0646\u0645\u0627\u06cc\u0634<\/strong>:<\/p>\n<ul>\n<li>\u0631\u0627\u0628\u0637 \u0686\u062a \u062a\u0627\u0631\u06cc\u062e \u0645\u06a9\u0627\u0644\u0645\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0646\u06af \u0647\u0627 \u0648 \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u06cc\u0646 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0631\u0628\u0627\u062a \u062a\u0645\u0627\u06cc\u0632 \u0642\u0627\u0626\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%88_%D8%A7%D8%B3%D8%AA%D9%82%D8%B1%D8%A7%D8%B1\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7%DB%8C\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Node.js \u0648 NPM \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0646\u062f.<\/li>\n<li>\u06cc\u06a9 \u06a9\u0644\u06cc\u062f API Groq \u0628\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0645\u062f\u0644 Llama.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%DA%AF%D8%A7%D9%85\"><\/span>\n<p>  \u06af\u0627\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<strong>\u06a9\u0644\u0648\u0646 \u0645\u062e\u0632\u0646<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   git clone https:\/\/github.com\/Minty-cyber\/AI-Chatbot\n   <span class=\"nb\">cd <\/span>chatbot\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\n<strong>\u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   npm <span class=\"nb\">install<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\n<p><strong>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/strong>:<\/p>\n<pre class=\"highlight plaintext\"><code> NEXT_PUBLIC_GROQ_API_KEY=your-groq-api-key\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/strong>:<\/p>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   npm run dev\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\n<strong>\u0645\u0633\u062a\u0642\u0631 \u06a9\u0631\u062f\u0646<\/strong>:<\/p>\n<ul>\n<li>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Vercel \u06cc\u0627 NetLify \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ol><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06cc\u0646 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u062a\u0648\u0636\u06cc\u062d \u0645\u0641\u0635\u0644\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u06cc\u06a9 \u0686\u062a \u0628\u0627\u0628\u0627\u062a AI \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0628\u0639\u062f. js\u0628\u0627 \u06af\u0644\u0647\u060c \u0648 \u0644\u0644\u0627\u0645\u0627 \u0645\u062f\u0644 \u0632\u0628\u0627\u0646. Chatbot \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u062d\u0648\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u062c\u0645\u0644\u0647 \u062f\u0627\u0646\u0634\u06af\u0627\u0647\u06cc\u0627\u0646 \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0627\u0634\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628 \u0645\u0642\u062f\u0645\u0647 \u0627\u062c\u0632\u0627\u06cc \u0627\u0635\u0644\u06cc \u062a\u0648\u0636\u06cc\u062d \u06a9\u062f \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":96206,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa6vprbvxedxogmlx1st6.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-96205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/96205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=96205"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/96205\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/96206"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=96205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=96205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=96205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}