search

keithtelliott / sidekicksammy.com

Helpful AI chatbot service
2 stars 0 forks source link

Once submitted the final form for the bot, it's not clear its working #69

Closed jacebenson closed 5 months ago

jacebenson commented 8 months ago

We should at minimum disable teh button and let the user know we're working on it.

keithtelliott commented 8 months ago

I updated the form wording today, but I did not address this issue. However, at least I now I understand this issue

jacebenson commented 8 months ago

I added some logic to try to address the form submission.

keithtelliott commented 7 months ago

Jace and I stepped through the bot creation code today. I gained better understanding.

In terms of the UI, we need to give the user some feedback and guidance.

keithtelliott commented 7 months ago

Modal could say: Your bot is being made. Show a robot cartoon working. Could give an embed code while it is working. And/or show the user what the bot will look like. See checklistpro.app and see the way they have incorporated the bot.

jacebenson commented 7 months ago

Maybe we can present a page where the chatbot would be iframed on top of their site. today I'm doing on checklistpro.app with this code;

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS styles for the button */
        .open-chat-dialog-button {
            position: fixed;
            bottom: 20px; /* Adjust the distance from the bottom as needed */
            right: 20px; /* Adjust the distance from the right as needed */
            padding: 10px 20px;
            background-color: #0074D9;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        /* CSS styles for the dialog */
        .chat-dialog {
            /*width: 60rem;*/
            width: 30rem;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        /* Center the dialog vertically and horizontally */
        .chat-dialog::backdrop {
            background-color: rgba(0, 0, 0, 0.7); /* Adjust the opacity as needed */
            display: flex;
            justify-content: center;
            align-items: center;
        }
      .close-chat-dialog-button {
        float: right
      }
    </style>
</head>
<body>
    <!-- Button to open the dialog -->
    <button class="open-chat-dialog-button" id="openChatDialogButton">AI Assistant</button>

    <!-- The dialog element -->
    <dialog class="chat-dialog" id="chatDialog">
      <iframe src="https://sidekicksammy.com/checklist-pro" frameborder="0" width="100%" style="
    height: 38rem;
"></iframe>
        <button id="closeChatDialogButton" class="close-chat-dialog-button">Close</button>
    </dialog>

    <script>
        // JavaScript to handle dialog behavior
        const openChatDialogButton = document.getElementById('openChatDialogButton');
        const closeChatDialogButton = document.getElementById('closeChatDialogButton');
        const chatDialog = document.getElementById('chatDialog');

        openChatDialogButton.addEventListener('click', () => {
            chatDialog.showModal();
        });

        closeChatDialogButton.addEventListener('click', () => {
            chatDialog.close();
        });
    </script>
</body>
</html>
keithtelliott commented 7 months ago

The user setup flow needs some refinement. I'll add notes here b/c it's related to this issue

0.5) The very first form should state what will happen when the user steps through it. Maybe just say, instead of Step 1 of 3, say "Setup your own AI Chatbot: Step 1 of 3"

1). Greeting UI input: Use radio selection (or dropdown selection) instead of buttons: Let's change the buttons for the Greeting selection to radio selection UI. Buttons imply action and jumping to another page or form. In this case, we are selecting an option.

2) When stepping from Step 2 to Step 3, the web page looks very different because the form is smaller. Adjust the format/colors/whatever to keep the same form input vibe going. Using tiiny.host as the guide... the form should be the focus, and everything else should be subtle. Our colors may be too bold. We probably need to tone-down the marketing colors and content as we create a simple and inviting vibe that encourages users to step through the form.

3). The URL needs to be absolute. I entered anchoragedentalgroup.com and an error is thrown at the end of the form workflow (but it is not visible to the user, the form just hangs up). We should automatically prepend https:// to the beginning of the URL if needed.

4) I'm getting another error associated with generating the prompt. I don't have time to dig in at the moment. I may be handy to trim down the complexity of this scheme at first (just use simple prompt). Then get it going without errors. Then add back the OpenAI API prompt creation feature.

5). The form just hangs on errors. We'll need to add error handling - notably for when API calls break after all of the form data has been entered.

jacebenson commented 7 months ago

What error was thrown? I tried it locally and I know I do a call to http://localhost:8910/.redwood/functions/getPages?website=anchoragedentalgroup.com and it seemed no links could be found. Really was trying to gauge how much work was going to need to be done to read their site, but it's hard to get that today w/fixies crawler.

looking further I see this on that website: image

keithtelliott commented 7 months ago

Here's the error that I get when submitting the last step of the form to create a new bot...

api | 06:24:26 🚨 graphql-server Cannot read properties of undefined (reading '0') 
api | 
api | 🚨 GraphQLError Info
api | 
api | {
api |   "path": [
api |     "createBotAndUser"
api |   ],
api |   "locations": [
api |     {
api |       "line": 2,
api |       "column": 3
api |     }
api |   ],
api |   "extensions": {}
api | }
api |  
api | 🥞 Error Stack
api | 
api | TypeError: Cannot read properties of undefined (reading '0')
api |     at generatePrompt (/Users/keith/Documents/sidekicksammy.com/api/src/services/complex/complex.ts:714:29)
api |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
api |     at Object.createBotAndUser (/Users/keith/Documents/sidekicksammy.com/api/src/services/complex/complex.ts:736:18)
api |     at async /Users/keith/Documents/sidekicksammy.com/node_modules/graphql-yoga/node_modules/@envelop/core/cjs/orchestrator.js:383:27
api |     at async YogaServer.getResultForParams (/Users/keith/Documents/sidekicksammy.com/node_modules/graphql-yoga/cjs/server.js:304:26)
api |     at async YogaServer.handle (/Users/keith/Documents/sidekicksammy.com/node_modules/graphql-yoga/cjs/server.js:77:29)
api |     at async handlerFn (/Users/keith/Documents/sidekicksammy.com/node_modules/@redwoodjs/graphql-server/dist/functions/graphql.js:90:24)
api |     at async execFn (/Users/keith/Documents/sidekicksammy.com/node_modules/@redwoodjs/graphql-server/dist/functions/graphql.js:147:16)
api |     at async requestHandler (/Users/keith/Documents/sidekicksammy.com/node_modules/@redwoodjs/api-server/dist/requestHandlers/awsLambdaFastify.js:72:30)

Prior to the comment, the following output is shown...

{
api |   messages: [
api |     {
api |       role: 'system',
api |       content: 'I am an experienced prompt designer specializing in creating effective prompts for topic-specific bots. With a deep understanding of various subjects and expert knowledge in bot design, I can provide concise and accurate information based on the given context. I strive to generate system prompts that effectively address user inquiries in the most efficient manner possible.'
api |     },
api |     {
api |       role: 'user',
api |       content: 'As an expert prompt designer for topic specific bots, I need your assistance. Can you generate a system prompt for me?'
api |     },
api |     {
api |       role: 'system',
api |       content: "Certainly! I'm here to help you. Please provide me with the desired outcome, greeting and the home page information in markdown format."
api |     },
api |     {
api |       role: 'user',
api |       content: 'Outcome: """Customer Support"""\n' +
api |         '\n' +
api |         `Greeting: """Hi, I'm Sammy! I'm here to help you with your questions."""\n` +
api |         '\n' +
api |         'Home Page: """[](/)\n' +
api |         '\n' +
api |         '[\\[email protected\\]](/cdn-cgi/l/email-protection#7c131a1a151f193c1d121f14130e1d1b19181912081d101b0e13090c521f1311)[(907) 349-6522](tel:9073496522)\n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/06/site-logo.png)\n' +
api |         '\n' +
api |         '* [Home](https://anchoragedentalgroup.com/)\n' +
api |         '* [About Us](https://anchoragedentalgroup.com/about-us/)  \n' +
api |         '   * [Our Dentists](https://anchoragedentalgroup.com/our-dentists/)  \n' +
api |         '   * [Our Office](https://anchoragedentalgroup.com/our-office/)  \n' +
api |         '   * [Meet The Team](https://anchoragedentalgroup.com/our-team/)  \n' +
api |         '   * [Patient Testimonials](https://anchoragedentalgroup.com/patient-testimonials/)  \n' +
api |         '   * [Review Us](https://anchoragedentalgroup.com/review-us/)\n' +
api |         '* [Dental Services](https://anchoragedentalgroup.com/dental-services/)  \n' +
api |         '   * [Dental Crowns](https://anchoragedentalgroup.com/dental-services/dental-crowns/)  \n' +
api |         '   * [Root Canal](https://anchoragedentalgroup.com/dental-services/root-canal/)  \n' +
api |         '   * [ Tooth Extraction](https://anchoragedentalgroup.com/dental-services/tooth-extraction/)  \n' +
api |         '   * [Dental Bridges](https://anchoragedentalgroup.com/dental-services/dental-bridges/)\n' +
api |         '* [Cosmetic Dentistry](https://anchoragedentalgroup.com/dental-services/cosmetic-dentistry/)  \n' +
api |         '   * [Juvederm](https://anchoragedentalgroup.com/juvederm/)  \n' +
api |         '   * [Teeth Whitening](https://anchoragedentalgroup.com/dental-services/teeth-whitening/)  \n' +
api |         '   * [Dental Implants](https://anchoragedentalgroup.com/dental-services/dental-implants/)  \n' +
api |         '   * [Dentures and Partials](https://anchoragedentalgroup.com/dental-services/dentures/)\n' +
api |         '* [Emergency Dentist](https://anchoragedentalgroup.com/emergency-dentist-anchorage/)\n' +
api |         '* [Patient Forms](https://anchoragedentalgroup.com/patient-forms/)  \n' +
api |         '   * [Financial Options](https://anchoragedentalgroup.com/financial-options/)  \n' +
api |         '   * [Medicaid Dentist in Anchorage](https://anchoragedentalgroup.com/medicaid-dentist/)\n' +
api |         '* [Contact Us](https://anchoragedentalgroup.com/contact-us/)\n' +
api |         '\n' +
api |         '# Looking For A Family Dentist?  \n' +
api |         '  \n' +
api |         'Welcome to Anchorage Dental Group\n' +
api |         '\n' +
api |         'A division of White Mountain Holdings  \n' +
api |         '\n' +
api |         '[Book your Appointment](https://anchoragedentalgroup.com/contact-us/)\n' +
api |         '\n' +
api |         '## Free Consultations \n' +
api |         '\n' +
api |         'You have nothing to lose with our “Free Consultations”. Come in and learn how we can help you get the smile you have always wanted.  \n' +
api |         '\n' +
api |         '## Treatment Options \n' +
api |         '\n' +
api |         'Our dentists will help you understand what your treatment options are and how to best serve you as our patient. Give us a call today!  \n' +
api |         '\n' +
api |         '## Cost of Services \n' +
api |         '\n' +
api |         'As one of the top dental clinics in Anchorage, we make it easy to understand the cost of our dental services. We also help with insurance billing.  \n' +
api |         '\n' +
api |         'WELCOME TO ANCHORAGE DENTAL GROUP\n' +
api |         '\n' +
api |         '## TOP REVIEWED ANCHORAGE DENTIST\n' +
api |         '\n' +
api |         'We are a family dentist located in Anchorage, Alaska. We provide dental services for the entire family and are always accepting new patients. Our primary focus is patient satisfaction, your oral health care and continuing the legacy and high quality standards lead by Dr. Phillip Plourde.   \n' +
api |         '  \n' +
api |         'We want you to feel like family at every visit and to be comfortable and confident with your smile and overall dental health. We are always available and know that choosing an Anchorage dentists for your entire family is something that shouldn’t be taken lightly.  \n' +
api |         '  \n' +
api |         'Your smile is the first thing people notice and is your greatest asset. Your dental health is also an indicator of your overall health and we want you to be happy with who you are.\n' +
api |         '\n' +
api |         '![Dr. Phillip Plourde DMD](https://anchoragedentalgroup.com/wp-content/uploads/2023/07/Dr.-Phillip-Plourde-DMD.jpg)\n' +
api |         '\n' +
api |         '![Dr Massey At Anchorage Dental Group](https://anchoragedentalgroup.com/wp-content/uploads/2021/07/Dr-Massey-At-Anchorage-Dental-Group.jpeg)\n' +
api |         '\n' +
api |         'IN OUR OFFICE\n' +
api |         '\n' +
api |         '## PAINLESS DENTAL TREATMENTS\n' +
api |         '\n' +
api |         'As your Anchorage Dentist, we go above and beyond to ensure your health and comfort! We have been serving the greater Anchorage area since 1991 as one of the leading dental clinics in the state. We belong to the American Dental Association, as well as the BBB. We try to go above and beyond your expectations in order to gain your business and trust.  \n' +
api |         '  \n' +
api |         'We want your dental experience to be as stress free and pain free as possible. That is why we get to know each patient individually to tailor our service to your needs! Every person is different, so every treatment should be, too.\n' +
api |         '\n' +
api |         'OUR CLINIC’S\n' +
api |         '\n' +
api |         '## Dental Services\n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/04/dentist-icon-6.png)\n' +
api |         '\n' +
api |         '#### Preventative Dentistry\n' +
api |         '\n' +
api |         'Our dentists can treat your entire family with comprehensive services.  \n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/04/dentist-icon-3.png)\n' +
api |         '\n' +
api |         '#### Cosmetic Dentistry\n' +
api |         '\n' +
api |         'Let’s create a beautiful smile that you will feel happy to show off.  \n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/04/dentist-icon-4.png)\n' +
api |         '\n' +
api |         '#### Dental Implants\n' +
api |         '\n' +
api |         'Our dentists can surgically place your dental implants at our office.  \n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/04/dentist-icon-2.png)\n' +
api |         '\n' +
api |         '#### Orthodontics  \n' +
api |         '\n' +
api |         'Crowns can help protect your teeth and improve your smile.  \n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/04/dentist-icon-5.png)\n' +
api |         '\n' +
api |         '#### Tooth Whitening\n' +
api |         '\n' +
api |         'We offer several types of teeth whitening procedures.  \n' +
api |         '\n' +
api |         '![](https://anchoragedentalgroup.com/wp-content/uploads/2021/04/dentist-icon-1.png)\n' +
api |         '\n' +
api |         '#### Restoration\n' +
api |         '\n' +
api |         'Live your life as if you had never suffered from missing teeth.  \n' +
api |         '\n' +
api |         'WHAT PEOPLE SAY\n' +
api |         '\n' +
api |         '## Patient Testimonials\n' +
api |         '\n' +
api |         'This office is one of the best in  \n' +
api |         ' Anchorage.   \n' +
api |         '  \n' +
api |         'They care about their patients, make you feel welcome, comfortable and safe, and provide great dental care in a very professional atmosphere.  \n' +
api |         '  \n' +
api |         ' They have stayed true to the practices that Dr. Mark Laurin began so many years ago in this office\n' +
api |         '\n' +
api |         'Corri W.\n' +
api |         '\n' +
api |         'Great dentistry. The staff was very professional and made me very comfortable. They were able to give me a copy of my X-rays via email. I had xrays and a teeth cleaning. Everything was pretty straight forward but I think nowadays it’s hard to find a good dentistry. I would have them as my regular dentist, though I moved. In any case, high recommend.  \n' +
api |         '\n' +
api |         'Alex S.\n' +
api |         '\n' +
api |         'Very clean and comfortable office! The office staff is knowledgeable and responsive.  \n' +
api |         'Dr. Massey is great and a true master at his craft!  \n' +
api |         'Jazz cleaned my teeth and is very gentle, works efficiently and quickly. The best cleaning I have had!  \n' +
api |         '  \n' +
api |         'I highly recommend Anchorage Dental Group!!\n' +
api |         '\n' +
api |         'Julia J.\n' +
api |         '\n' +
api |         '### Visit Us\n' +
api |         '\n' +
api |         'Book your appointment with our dental office today\n' +
api |         '\n' +
api |         '[Book your Appointment](https://anchoragedentalgroup.com/contact-us/)\n' +
api |         '\n' +
api |         'Who We Are\n' +
api |         '\n' +
api |         'Since 1991, Anchorage Dental Group has been the leader and preferred provider of quality dental services to our patients in Anchorage and the surrounding areas. Our experienced dentists and staff offer comprehensive dental examinations and specialize in a wide array of cosmetic, preventative, general and specialized dental services.  \n' +
api |         '  \n' +
api |         'In our mission to provide the best dental services possible, our doctors use only the most advanced, state-of-the-art technology available. We are committed to educating our patients and providing personalized dental services to the people of Anchorage. At our practice, you will find dental professionals who genuinely care about your health and are dedicated to providing exceptional service to everyone who walks through our door.  \n' +
api |         '  \n' +
api |         'Schedule an appointment with an experienced dentist at our Anchorage office and give your smile the level of care and attention it deserves.\n' +
api |         '\n' +
api |         'Patient Services\n' +
api |         '\n' +
api |         '[Patient Forms](https://anchoragedentalgroup.com/patient-forms/)[Financial Options](https://anchoragedentalgroup.com/financial-options/)[Medicaid Payments ](https://anchoragedentalgroup.com/medicaid-dentist/)[Notice of Nondiscrimination](https://anchoragedentalgroup.com/notice-of-non-discrimination/)\n' +
api |         '\n' +
api |         'Business Hours\n' +
api |         '\n' +
api |         'Monday – 8:00 AM – 5:00 PM  \n' +
api |         'Tuesday – 8:00 AM – 5:00 PM  \n' +
api |         'Wednesday – 8:00 AM – 5:00 PM  \n' +
api |         'Thursday – 8:00 AM – 5:00 PM  \n' +
api |         'Friday – 9:30 AM - 4:00 PM  \n' +
api |         'Saturday – Closed  \n' +
api |         'Sunday – Closed\n' +
api |         '\n' +
api |         'Our Location\n' +
api |         '\n' +
api |         'Anchorage Dental Group  \n' +
api |         '  \n' +
api |         '8301 Briarwood St, Ste 201  \n' +
api |         'Anchorage, AK 99518  \n' +
api |         '  \n' +
api |         'Phone: (907) 349-6522  \n' +
api |         'Fax: (907) 349-9850  \n' +
api |         '  \n' +
api |         '[Find us on Google](https://www.google.com/maps/place/Anchorage+Dental+Group/@61.1457657,-149.8617636,17z/data=!3m1!4b1!4m5!3m4!1s0x56c899d768996baf:0x27557c93a5d9bb2b!8m2!3d61.1458667!4d-149.8595698)\n' +
api |         '\n' +
api |         '©2022 Anchorage Dental Group, a Division of White Mountain Holdings  \n' +
api |         '\n' +
api |         '[Privacy Policy](https://anchoragedentalgroup.com/privacy-policy/)[Notice of Nondiscrimination](https://anchoragedentalgroup.com/notice-of-non-discrimination/)[Free Language Assistance](https://anchoragedentalgroup.com/notice-of-non-discrimination/)\n' +
api |         '\n' +
api |         'envelope-ophonefacebookangle-downyelpcloud-uploadcrossmenuwarningcheckmark-circle """'
api |     }
api |   ]
api | }