Demo
ProcureSpark Demo


<!-- Hero -->
<div class="px-4 pt-5 mt-5">
    <div class="container-xl">
        <h1 class="display-5 mb-3 fw-bold text-body-emphasis text-center">ProcureSpark Demo</h1>
        <div class="alert alert-info d-flex justify-content-between align-items-center" role="alert">
            <div class="text-start">
                <strong>The following demo is based on <a class="alert-link" target="_blank" href="https://www.pec.coop/wp-content/uploads/2018/03/RFP-2018-008-Help-Desk-Solution.pdf">this RFP</a>.<br></strong>
                <p class="mb-0">ProcureSpark's AI is able to automatically extract and answer questions using the knowledge base.</p>
            </div>
            <button onclick="reset()" class="btn btn-outline-info">Reset demo</button>
        </div>
    </div>
</div>

<div id="dashboard">
    <div class="my-5 container-xl">
        <div class="row">
            <div class="col-lg-3 mb-3">
                <div class="card">
                    <div class="card-header"><h5>Analytics</h5></div>
                    <div class="card-body">
                        <p>
                            <strong>Annual revenue:</strong> $8.7M<br>
                            <strong>Quarterly revenue:</strong> $1.9M<br>
                            <strong>Monthly revenue:</strong> $0.61M<br>
                        </p>
                        <p>
                            <strong>Participation rate:</strong> 87%<br>
                            <strong>Shortlist rate:</strong> 78%<br>
                            <strong>Win rate:</strong> 66%<br>
                        </p>
                        <p>
                            <strong>First draft:</strong> 20 secs<br>
                            <strong>Second draft:</strong> 4 days<br>
                            <strong>Final draft:</strong> 6 days<br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="row-1">
                    <div class="col mb-3">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5>Open Proposals</h5>
                                <button class="btn btn-outline-primary" onclick="newProposal()"><i class="fa-solid fa-file-circle-plus"></i> New proposal</button>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Proposal</th>
                                                <th scope="col" class="text-center">Pending</th>
                                                <th scope="col" class="text-center">Review</th>
                                                <th scope="col" class="text-center">Complete</th>
                                                <th scope="col">Due</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><a href="#">Gaming App</a><br><small>VeriTech</small></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-primary">2</span></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-warning">12</span></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-success">5</span></td>
                                                <td>Jun&nbsp;19</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Shopify App</a><br><small>Stellaris</small></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-primary">7</span></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-warning">17</span></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-success">23</span></td>
                                                <td>Jul&nbsp;16</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Grid Website</a><br><small>QuantumX</small></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-primary">7</span></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-warning">1</span></td>
                                                <td class="text-center"><span class="badge rounded-pill text-bg-success">0</span></td>
                                                <td>Sep&nbsp;12</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col mb-3">
                        <div class="card">
                            <div class="card-header"><h5>Submitted Proposals</h5></div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Proposal</th>
                                                <th scope="col">Value</th>
                                                <th scope="col" class="text-center">Status</th>
                                                <th scope="col">Feedback</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><a href="#">Design</a><br><small>VeriTech</small></td>
                                                <td>$0.15M</td>
                                                <td class="text-center"><span class="badge text-bg-warning">Pending</span></td>
                                                <td><a class="text-secondary" href="#">View</a></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Marketing Plan</a><br><small>Stellaris</small></td>
                                                <td>$0.63M</td>
                                                <td class="text-center"><span class="badge text-bg-success">Won</span></td>
                                                <td><a class="text-secondary" href="#">View</a></td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Branding</a><br><small>QuantumX</small></td>
                                                <td>$1.66M</td>
                                                <td class="text-center"><span class="badge text-bg-success">Won</span></td>
                                                <td><a class="text-secondary" href="#">View</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>Knowledge Base</h5>
                        <button onclick="manageKnowledgeBase()" class="btn btn-outline-secondary"><i class="fa-solid fa-pen"></i></button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">Documents</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td><i class="fa-regular fa-file fa-fw"></i> Company Overview</td></tr>
                                    <tr><td><i class="fa-regular fa-file fa-fw"></i> 2022 Q4 Results</td></tr>
                                    <tr><td><i class="fa-regular fa-file fa-fw"></i> March Newsletter</td></tr>
                                    <tr><td><i class="fa-regular fa-file fa-fw"></i> Freelancer Network</td></tr>
                                    <tr><td><i class="fa-regular fa-file fa-fw"></i> Client Testimonials</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div hidden id="proposals">
    <!-- Details pane -->
    <div hidden class="container-xl my-5 fixed-bottom" style="z-index: 0" id="detailsPane">
        <div class="row">
            <div class="col-lg-4 offset-lg-8">
                <div class="card" id="sparkAi">
                    <div class="card-header">
                        <h5>Details</h5>
                        <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="assistant-tab" data-bs-toggle="tab" data-bs-target="#assistant-tab-pane" type="button" role="tab" aria-controls="assistant-tab-pane" aria-selected="true">Spark AI</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="sources-tab" data-bs-toggle="tab" data-bs-target="#sources-tab-pane" type="button" role="tab" aria-controls="sources-tab-pane" aria-selected="false">Sources</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="progress-tab" data-bs-toggle="tab" data-bs-target="#progress-tab-pane" type="button" role="tab" aria-controls="progress-tab-pane" aria-selected="false">Progress</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" id="myTabContent">
                        <!-- Assistant tab -->
                        <div class="tab-pane fade show active" id="assistant-tab-pane" role="tabpanel" aria-labelledby="assistant-tab" tabindex="0">
                            <div class="card-body" style="height: 20.5em; overflow-y: auto;">
                                <div id="sparkAiBody">
                                    <div class="text-secondary text-center my-5">Ask me anything.</div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="d-flex">
                                    <textarea disabled class="form-control me-2" rows="1"></textarea>
                                    <button disabled class="btn btn-outline-info"><i class="fa-solid fa-arrow-up"></i></button>
                                </div>
                            </div>
                        </div>
                        <!-- Sources tab -->
                        <div class="tab-pane fade" id="sources-tab-pane" role="tabpanel" aria-labelledby="sources-tab" tabindex="0">
                            <div class="card-body" style="height: 20.5em; overflow-y: auto;">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        Large Telecommunications Company:<br>"We partnered with Accenture to implement a help desk solution to streamline our customer support process. Their agile methodology and change management expertise played a vital role in the success of the project. Accenture's team adapted quickly to our evolving requirements, and their effective communication ensured that our employees embraced the new system. We've seen a significant improvement in customer satisfaction and operational efficiency since the implementation."
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-secondary">Client Testimonials</small>
                                    </div>
                                </div>
                                <div class="card mb-3">
                                    <div class="card-body">
                                        Leading E-commerce Retailer:<br>"We engaged Accenture to develop a help desk solution to manage the growing volume of customer inquiries. Their agile approach allowed us to iteratively refine the solution, ensuring it met our unique needs. Accenture's change management strategy facilitated a smooth transition for our support staff and customers, resulting in minimal disruption during the implementation. The new help desk solution has greatly improved our response times and customer satisfaction."
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-secondary">Client Testimonials</small>
                                    </div>
                                </div>
                                <div class="card mb-3">
                                    <div class="card-body">
                                        Global Financial Institution:<br>"We chose Accenture to implement a help desk solution to better manage our IT support requests. Their agile methodology experience enabled them to rapidly deliver a solution that addressed our specific challenges. Accenture's comprehensive change management plan ensured that our employees were well-prepared for the new system and that the transition was seamless. The help desk solution has greatly improved our IT support efficiency and reduced overall resolution times."
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-secondary">Client Testimonials</small>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="d-flex">
                                    <button disabled class="btn btn-outline-primary"><i class="fa-solid fa-circle-nodes"></i> Knowledge base</button>
                                </div>
                            </div>
                        </div>
                        <!-- Progress tab -->
                        <div class="tab-pane fade" id="progress-tab-pane" role="tabpanel" aria-labelledby="progress-tab" tabindex="0">
                            <div class="card-body" style="height: 20.5em; overflow-y: auto;">
                                <div class="card mb-3">
                                    <div class="card-body">Created by <a href="#">David</a></div>
                                    <div class="card-footer"><small class="text-secondary">Today 8:02am</small></div>
                                </div>
                                <div class="card mb-3">
                                    <div class="card-body"><a href="#">David</a> assigned to <a href="#">Prateek</a></div>
                                    <div class="card-footer"><small class="text-secondary">Today 8:05am</small></div>
                                </div>
                                <div class="card mb-3">
                                    <div class="card-body"><a href="#">Prateek</a> commented <strong>"Took a first cut. Do we need more detail here?"</strong></div>
                                    <div class="card-footer"><small class="text-secondary">Today 8:23am</small></div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="d-flex">
                                    <textarea disabled class="form-control me-2" rows="1"></textarea>
                                    <button disabled class="btn btn-outline-primary"><i class="fa-solid fa-arrow-up"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-xl my-5" id="uploadWrapper">
        <div class="row">
            <div class="col mb-3">
                <!-- Upload RFP -->
                <div class="card">
                    <div class="card-header"><h5>Auto-generate Proposal from RFP</h5></div>
                    <div class="card-body">
                        <p>Click the button below to upload and auto-extract questions from an RFP.</p>
                        <div class="text-center my-5">
                            <button class="btn btn-primary btn-lg" id="uploadRfp" onclick="step1()"><i class="fa-solid fa-arrow-up-from-bracket"></i> Upload RFP</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div hidden class="container-xl my-5" id="titleDatesQuestionsWrapper">
        <div class="row">
            <div class="col mb-3">
                <!-- Proposal title -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5>Proposal</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6"><label for="" class="col-form-label">Title</label></div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" value="Help Desk Solution">
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6"><label for="" class="col-form-label">Client</label></div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" value="PG&E">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Due dates -->
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>Key Dates</h5>
                        <button class="disabled btn btn-outline-secondary"><i class="fa-solid fa-plus"></i></button>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6"><label for="" class="col-form-label">Release date</label></div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" value="May 7, 2023">
                                    <button class="disabled btn btn-outline-danger"><i class="fa-regular fa-trash-can"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6"><label for="" class="col-form-label">Pre-submittal conference call</label></div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" value="Jun 20, 2023">
                                    <button class="disabled btn btn-outline-danger"><i class="fa-regular fa-trash-can"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6"><label for="" class="col-form-label">Final questions accepted</label></div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" value="Jun 22, 2023">
                                    <button class="disabled btn btn-outline-danger"><i class="fa-regular fa-trash-can"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6"><label for="" class="col-form-label">Due date</label></div>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" value="Jun 29, 2023">
                                    <button class="disabled btn btn-outline-danger"><i class="fa-regular fa-trash-can"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Extracted questions -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>Questions</h5>
                        <button class="disabled btn btn-outline-secondary"><i class="fa-solid fa-plus"></i></button>
                    </div>
                    <div class="card-body">
                        <p>The following questions have been generated from the RFP. Please verify their accuracy, edit, delete, and reorder as necessary.</p>
                        <div id="questionsWrapper"></div>
                        <button id="autoRespondButton" onclick="step2()" class="btn btn-lg btn-primary"><i class="fa-solid fa-circle-nodes"></i> Auto-respond</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="my-5 container-xl">
        <div class="row">
            <div class="col-lg-8 mb-3">
                <!-- Questions & responses -->
                <div hidden id="questionsAnswersWrapper"></div>
            </div>
        </div>
    </div>
</div>

<div hidden id="knowledgeBase">
    <div class="my-5 container-xl">
        <div class="row">
            <div class="col-lg-4 mb-3 order-lg-2">
                <div class="card mb-3">
                    <div class="card-header"><h5>Train AI on Documents</h5></div>
                    <div class="card-body">
                        <label class="form-label" for="">Upload a document: <small class="text-secondary">(pdf, docx, pptx, csv, txt, html)</small></label>
                        <input class="form-control" type="file">
                        <div class="text-lg-end">
                            <button class="mt-3 btn btn-primary" onclick="trainDocuments()" id="trainDocumentsButton"><i class="fa-solid fa-circle-nodes"></i> Train AI</button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><h5>Train AI on Website</h5></div>
                    <div class="card-body">
                        <label class="form-label" for="">Enter a URL:</label>
                        <input class="form-control" type="text" placeholder="https://docs.gusto.com">
                        <div class="text-lg-end">
                            <button class="mt-3 btn btn-primary" onclick="trainWebsite()" id="trainWebsiteButton"><i class="fa-solid fa-circle-nodes"></i> Train AI</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 order-lg-1">
                <div class="card">
                    <div class="card-header"><h5>Knowledge Base</h5></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">Document</th>
                                        <th scope="col">Date uploaded</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><i class="fa-regular fa-file fa-fw"></i> <a href="#">Company Overview</a></td>
                                        <td>12/27/22</td>
                                        <td><a class="text-secondary" href="#">Delete</a></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-regular fa-file fa-fw"></i> <a href="#">2022 Q4 Results</a></td>
                                        <td>12/27/22</td>
                                        <td><a class="text-secondary" href="#">Delete</a></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-regular fa-file fa-fw"></i> <a href="#">March Newsletter</a></td>
                                        <td>12/27/22</td>
                                        <td><a class="text-secondary" href="#">Delete</a></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-regular fa-file fa-fw"></i> <a href="#">Freelancer Network</a></td>
                                        <td>12/27/22</td>
                                        <td><a class="text-secondary" href="#">Delete</a></td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa-regular fa-file fa-fw"></i> <a href="#">Client Testimonials</a></td>
                                        <td>12/27/22</td>
                                        <td><a class="text-secondary" href="#">Delete</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    let questions = {
        "Provide an overview of your company.": "Accenture is a leading global professional services company, providing a broad range of services and solutions in strategy, consulting, digital, technology, and operations. With a presence in more than 120 countries and employing over 500,000 people, Accenture is uniquely positioned to help clients across various industries drive innovation, enhance customer experiences, and achieve high performance. By combining deep industry knowledge, unmatched experience, and specialized skills, Accenture collaborates with clients to help them navigate the complexities of today's rapidly changing business landscape and transform their organizations for the future.<br><br>At the core of Accenture's success lies its dedication to delivering end-to-end solutions that are tailored to the specific needs of each client. Leveraging cutting-edge technologies, such as artificial intelligence, cloud computing, and advanced analytics, Accenture strives to create innovative, scalable, and sustainable solutions that drive growth and efficiency. In addition, Accenture places a strong emphasis on fostering a diverse and inclusive work environment, nurturing a culture of continuous learning and development, and adhering to the highest ethical standards. This commitment to excellence and responsible business practices has earned Accenture a reputation as a trusted partner for organizations seeking to navigate the challenges of digital transformation and achieve lasting success.",
        "Provide examples of relevant past work.": "At Accenture, we have extensive experience in delivering high-quality, custom software solutions to our clients. Below, we describe our relevant experience in addressing the Scope of Services requested by this RFP.<br><br>1. Relevant Experience:<br><br>Accenture has successfully executed numerous projects of similar size and scope over the past four years. We have implemented Help Desk Solutions for various organizations across multiple industries, allowing us to understand the unique challenges and requirements of each sector. Some of our key projects include:<br><br>a) Global Telecommunications Company (GTC):<br>We developed a comprehensive Help Desk Solution for GTC, a large telecommunications provider. Our solution enabled the company to manage customer service requests, track issues from submission to resolution, and streamline communication between support teams and customers. As a result, GTC saw a 35% reduction in issue resolution times and a 25% increase in overall customer satisfaction.<br><br>b) Major Energy Provider (MEP):<br>For MEP, we designed and implemented a Help Desk Solution that integrated with their existing infrastructure and systems, allowing them to manage and resolve customer inquiries related to billing, outages, and service disruptions. The solution led to a 30% improvement in ticket resolution efficiency and a 20% increase in first-contact resolution rates.<br><br>c) National Utility Corporation (NUC):<br>We built a custom Help Desk Solution for NUC that allowed their customers to report service issues via a mobile app, streamlining the issue resolution process. Our solution incorporated advanced ticketing, configurable workflows, and seamless integration with existing systems, resulting in a 40% reduction in average ticket resolution time and a significant increase in customer satisfaction.<br><br>Our Agile Software Development Capabilities:<br><br>Accenture is a strong advocate of Agile software development methodology, and we have extensive experience in implementing this approach across a range of projects. Our Agile practices ensure effective collaboration, communication, and adaptability throughout the development process, enabling us to deliver high-quality, scalable solutions that cater to your specific needs.<br><br>In each of the aforementioned projects, we utilized Agile methodologies, including Scrum and Kanban, to manage development teams, prioritize tasks, and maintain a continuous feedback loop with our clients. By employing Agile principles, we were able to ensure timely delivery, adapt to changing requirements, and consistently exceed client expectations.<br><br>We are confident that our experience and commitment to Agile development practices make us the ideal partner for PG&E's Help Desk Solution implementation. Our team of experts is ready to deliver a comprehensive, tailor-made solution that will not only meet your requirements but also exceed your expectations.",
        "Describe the proposed plan to implement the application and include suggested training for application administration.": "We recognize the importance of a well-structured implementation plan and comprehensive training for application administration. Our proposed plan for the Help Desk Solution implementation and training is outlined below, with a focus on ensuring a smooth and efficient rollout.<br><br>Implementation Plan:<br><br>Discovery & Requirements Gathering (2-4 weeks):<br><br>Our team will work closely with PG&E stakeholders to understand the specific requirements, expectations, and objectives of the Help Desk Solution. We will conduct workshops, interviews, and document reviews to gather detailed information about existing systems, processes, and potential integrations.<br><br>Design & Development (8-12 weeks):<br><br>Based on the gathered requirements, our development team will create a detailed design, including wireframes and mockups for the mobile app and back-end system. Once approved, we will begin the development process using Agile methodologies, with regular sprint reviews to ensure alignment with PG&E's expectations.<br><br>Testing & Quality Assurance (4-6 weeks):<br><br>Upon completion of development, our QA team will conduct thorough testing, including functional, performance, security, and integration tests. Any identified issues will be addressed and resolved before proceeding to the deployment stage.<br><br>Deployment & Integration (2-4 weeks):<br><br>The tested and validated Help Desk Solution will be deployed and integrated with PG&E's existing systems. This phase will also include data migration, if required, and final system configuration.<br><br>Go-Live & Support (1-2 weeks):<br><br>Once the deployment and integration are complete, we will launch the Help Desk Solution and provide dedicated support to ensure a seamless transition for PG&E's team and customers.<br><br>Training for Application Administration:<br><br>Accenture understands the importance of proper training to ensure effective application administration. Our training program consists of the following components:<br><br>Administrator Training (1-2 weeks):<br><br>We will provide hands-on training sessions for PG&E's designated administrators, covering topics such as system configuration, user management, workflow customization, and reporting.<br><br>Support Agent Training (1 week):<br><br>Our team will conduct training sessions for support agents, focusing on ticket management, communication with customers, and utilizing the knowledge base and other available resources.<br><br>Customized Documentation:<br><br>Accenture will deliver customized user manuals, administration guides, and quick reference materials for PG&E's team, ensuring they have the necessary resources to effectively manage the Help Desk Solution.<br><br>Ongoing Support & Refresher Training:<br><br>To ensure continuous improvement and address any emerging needs, Accenture will provide ongoing support and refresher training sessions as needed.<br><br>Our proposed implementation timeline is designed to ensure a successful rollout of the Help Desk Solution while minimizing disruption to PG&E's operations. The specific tasks and staff assigned will be tailored to meet the unique needs of the project, with a dedicated team of experienced professionals from Accenture, including project managers, developers, QA specialists, and trainers.",
        "Describe the proposed plan to provide operational support and maintenance of the application throughout term of the contract. Identify proposed tasks and schedule.": "Accenture is committed to providing ongoing operational support and maintenance for the Help Desk Solution throughout the term of the contract, ensuring optimal performance and continuous improvement. Our proposed plan for support and maintenance, incorporating Agile methodologies, is outlined below:<br><br>Dedicated Support Team:<br>Accenture will assign a dedicated support team consisting of experienced professionals, including technical support specialists, developers, and QA analysts, to provide timely assistance and ensure seamless operation of the Help Desk Solution.<br><br>Incident Management & Resolution (Ongoing):<br>Our support team will be responsible for addressing any incidents, bugs, or issues that may arise during the operation of the application. Using Agile methodologies, we will prioritize incidents based on severity and impact, resolving critical issues swiftly to minimize disruption to PG&E's operations.<br><br>Continuous Improvement & Feature Enhancements (Quarterly Sprints):<br>Following Agile principles, we will plan and execute quarterly sprints focused on application enhancements and improvements. These sprints will include gathering feedback from PG&E stakeholders, identifying areas for improvement, and prioritizing new features based on business value and feasibility.<br><br>Preventive Maintenance (Biannual):<br>To ensure optimal performance and stability, our team will conduct biannual preventive maintenance activities, including system health checks, performance tuning, and security assessments. These activities will be planned and executed following Agile maintenance practices to minimize disruption and maximize efficiency.<br><br>System Updates & Upgrades (As needed):<br>Accenture will ensure that the Help Desk Solution remains up-to-date and compatible with the latest technologies, security standards, and industry best practices. We will schedule and manage updates and upgrades using Agile release management techniques, coordinating with PG&E stakeholders to minimize impact on operations.<br><br>Regular Status Meetings & Reporting (Monthly):<br>Our team will hold monthly status meetings with PG&E stakeholders to provide updates on support and maintenance activities, discuss any concerns, and gather feedback for continuous improvement. Additionally, we will provide monthly reports detailing incident resolutions, completed maintenance tasks, and ongoing enhancement efforts.<br><br>Agile Support Retrospectives (Biannual):<br>To continuously refine and improve our support and maintenance processes, we will conduct biannual Agile retrospectives with our support team and PG&E stakeholders. These sessions will focus on identifying opportunities for improvement, addressing challenges, and implementing lessons learned to enhance the overall support experience.<br><br>Our proposed plan for operational support and maintenance is designed to align with the implementation plan, ensuring a seamless transition from project completion to ongoing support. By incorporating Agile methodologies in our support and maintenance processes, we will ensure a flexible, responsive, and efficient approach to managing the Help Desk Solution throughout the term of the contract.",
        "Identify the number and professional qualifications of staff to be assigned to the project and relevant experience on projects of similar size and scope.": "Accenture will assign a dedicated team of highly skilled professionals to ensure the successful implementation and ongoing support of the Help Desk Solution for PG&E. The team composition and members' qualifications are outlined below:<br><br>Project Manager (1):<br>The Project Manager will have a PMP certification and extensive experience in managing projects of similar size and scope. They will be responsible for overseeing the project's progress, coordinating resources, and ensuring effective communication between all stakeholders.<br><br>Scrum Master (1):<br>The Scrum Master, with a Certified ScrumMaster (CSM) certification, will facilitate the Agile process, ensuring that the development team follows Scrum practices and collaborates effectively. They will also work to remove any obstacles that may hinder the team's progress.<br><br>Product Owner (1):<br>The Product Owner, experienced in working on projects of similar nature, will act as the primary liaison between the development team and PG&E stakeholders, ensuring that the project's objectives and requirements are clearly defined and prioritized in the product backlog.<br><br>Business Analysts (2):<br>Our Business Analysts, with certifications such as CBAP or CCBA, will have experience in projects of similar size and scope. They will be responsible for gathering and documenting requirements, creating user stories, and facilitating communication between the development team and PG&E stakeholders.<br><br>Software Developers (4-6):<br>Our team of software developers will have strong technical expertise in the required programming languages, frameworks, and platforms. They will have a proven track record of working on projects of similar size and scope, ensuring the successful development and implementation of the Help Desk Solution.<br><br>Quality Assurance Analysts (2-3):<br>The QA Analysts, with certifications such as ISTQB or CSTE, will have extensive experience in testing and quality assurance for projects of similar size and scope. They will be responsible for creating test plans, executing tests, and ensuring the Help Desk Solution meets the required quality standards.<br><br>Technical Support Specialists (2):<br>Our Technical Support Specialists, experienced in supporting projects of similar size and scope, will be responsible for providing ongoing support and maintenance for the Help Desk Solution. They will address any incidents, bugs, or issues that may arise during operation.<br><br>Trainer (1):<br>The Trainer, with a background in instructional design and experience in delivering training for projects of similar size and scope, will be responsible for developing and conducting training sessions for PG&E's administrators and support agents, ensuring effective use and administration of the Help Desk Solution.<br><br>The team members assigned to the project will have relevant experience working on projects of similar size and scope, ensuring that they possess the necessary skills and expertise to deliver a successful Help Desk Solution for PG&E.",
        "Complete a SWOT analysis on this project.": "A SWOT analysis for the Help Desk Solution project will provide a comprehensive understanding of the project's strengths, weaknesses, opportunities, and threats. This will help Accenture and PG&E to identify areas of focus and make informed decisions throughout the project's lifecycle.<br><br>Strengths:<br> - Experienced team: Accenture's skilled and certified professionals have experience in implementing similar projects, ensuring a high level of expertise and knowledge.<br> - Agile methodology: Our use of Agile methodologies ensures a flexible, iterative approach to development, enabling quick adaptation to changing requirements and continuous improvement.<br> - Strong communication and collaboration: Accenture's emphasis on open communication and collaboration with PG&E stakeholders helps foster a shared understanding of objectives and requirements.<br> - Comprehensive support and maintenance plan: Our detailed support and maintenance plan ensures smooth operations and continuous improvements throughout the term of the contract.<br><br>Weaknesses:<br> - Integration complexity: Integrating the Help Desk Solution with multiple existing systems may pose challenges and complexities that could impact the project timeline.<br> - Potential resistance to change: Introducing a new Help Desk Solution may encounter resistance from PG&E's employees and customers, which could impact adoption and overall success.<br> - Resource allocation: Balancing the resources needed for this project while managing other ongoing projects could lead to potential resource constraints and competing priorities.<br><br>Opportunities:<br> - Improved customer satisfaction: The Help Desk Solution has the potential to significantly improve PG&E's customer satisfaction by streamlining the issue reporting and resolution process.<br> - Enhanced operational efficiency: The new Help Desk Solution can lead to increased efficiency for PG&E's support teams, allowing them to manage and resolve customer issues more effectively.<br> - Continuous improvement: Utilizing the Agile methodology and ongoing feedback from stakeholders can lead to continuous improvement and optimization of the Help Desk Solution.<br> - Potential for future collaboration: Successful implementation and support of the Help Desk Solution could lead to further collaboration between Accenture and PG&E on additional projects.<br><br>Threats:<br> - Technological advancements: Rapid advancements in technology may necessitate future updates and upgrades to the Help Desk Solution to ensure it remains current and effective.<br> - Data security and privacy concerns: Ensuring the security and privacy of customer data is paramount, and any potential breaches could impact the project's success and reputation.<br> - Competing solutions: The presence of competing help desk solutions in the market may lead to potential comparisons and expectations from PG&E and its customers.<br> - Regulatory and compliance requirements: Changes in regulations or compliance requirements may necessitate modifications to the Help Desk Solution, impacting the project timeline and cost.<br><br>By understanding and addressing the strengths, weaknesses, opportunities, and threats of the Help Desk Solution project, Accenture and PG&E can make informed decisions and effectively manage the project to achieve lasting success.",
        "Outline possible mitigation strategies for the weaknesses identified": "To address the weaknesses identified in the SWOT analysis, we propose the following mitigation plans:<br><br>Integration complexity:<br> - Early engagement with PG&E stakeholders to identify and understand the existing systems and required integrations.<br> - Collaborate with system experts from both Accenture and PG&E to ensure a clear understanding of the integration requirements and potential challenges.<br> - Allocate dedicated resources with experience in system integration to minimize risks and facilitate a smooth integration process.<br> - Conduct thorough testing and validation of the integrations to ensure seamless operation and data consistency.<br><br>Potential resistance to change:<br> - Engage in effective change management practices throughout the project, including clear communication of the benefits of the new Help Desk Solution to PG&E employees and customers.<br> - Involve key stakeholders and end-users in the design and development process to foster ownership and buy-in.<br> - Provide comprehensive training for PG&E administrators and support agents, ensuring they are comfortable and confident in using the new system.<br> - Establish a feedback loop to address concerns and incorporate improvements based on user experiences.<br><br>Resource allocation:<br> - Develop a detailed project plan that outlines the required resources and timelines, ensuring a clear understanding of the project's scope and priorities.<br> - Continuously monitor resource allocation and adjust as needed to prevent bottlenecks and ensure efficient project progress.<br> - Leverage Accenture's global resource pool to address potential resource constraints and access a diverse range of skills and expertise.<br> - Regularly communicate with PG&E stakeholders and the Accenture project team to address any resource-related concerns and make necessary adjustments.<br><br>By implementing these mitigation plans, Accenture can effectively address the identified weaknesses and ensure a successful Help Desk Solution implementation and ongoing support for PG&E.",
        "List the top 20 features that you envisage for the Help Desk Solution.": "By incorporating these top features, the Help Desk Solution will significantly improve PG&E customers' experience when interacting with PG&E for help and support, leading to increased satisfaction and trust. The following list of features have been identified based on Accenture’s existing experience within Help Desk Solutions across several industries.<br><br> - User-friendly mobile app interface: A simple and intuitive mobile app interface enhances user experience and encourages customers to quickly report issues and seek help.<br> - Ticketing system with unique sequential IDs: Unique IDs allow for easy tracking, reporting, and retrieval of service requests, improving efficiency and customer experience.<br> - Configurable ticket template: Customizable templates help capture specific information related to the issue, ensuring accurate and efficient resolution of customer concerns.<br> - Configurable ticket priority schemes: Prioritizing tickets based on product or user ensures that critical issues are addressed promptly, reducing wait times and improving customer satisfaction.<br> - Advance dated ticket creation: Allows customers to schedule services or report anticipated issues, leading to better resource planning and improved service delivery.<br> - No user deletion of tickets: Ensures that all issues are logged and tracked, preventing accidental deletion and maintaining a complete record of customer interactions.<br> - Agent and end-user ticket management: Allows customers to open, cancel, and close tickets, providing a sense of control over their service requests and improving communication.<br> - Re-opening of closed tickets: Enables customers to request further assistance if the initial resolution is unsatisfactory, improving customer satisfaction and issue resolution.<br> - Configurable workflows and workgroups: Streamlines ticket handling by assigning requests to appropriate teams, resulting in faster response times and more effective resolutions.<br> - Grouping of like events/issues: Facilitates efficient resource allocation and helps identify recurring issues, improving service reliability and customer satisfaction.<br> - User system screenshot capture: Allows customers to provide visual context, enabling faster issue diagnosis and resolution.<br> - Learning knowledge base: Provides customers with access to relevant information and solutions, enabling self-service and reducing the need for direct support.<br> - Frequently Asked Questions (FAQs): Provides instant access to common solutions, reducing customer wait times and support agent workload.<br> - System integration with other platforms: Seamless integration with existing systems improves data consistency and enables efficient information sharing, improving overall support quality.<br> - Single sign-on with Active Directory: Simplifies the authentication process for customers, providing a seamless and secure user experience.<br> - Configurable Service Level Alerts: Ensures timely issue resolution and helps PG&E adhere to service level agreements, improving customer satisfaction and trust.<br> - Agile project methodology compatibility: Allows for continuous improvement and adaptation to changing customer needs, resulting in an evolving and responsive help desk solution.<br> - Unlimited ticket attachments: Enables customers to provide additional information through attachments, aiding in quicker issue diagnosis and resolution.<br> - Queue management for resource back-ups: Ensures effective resource allocation and prevents bottlenecks in service delivery, improving customer satisfaction.<br> - Onboarding and offboarding workflows: Streamlines the process of adding or removing customers from the help desk system, ensuring accurate and up-to-date customer information.",
        "Share 3 relevant client testimonials.": "Large Telecommunications Company:<br>\"We partnered with Accenture to implement a help desk solution to streamline our customer support process. Their agile methodology and change management expertise played a vital role in the success of the project. Accenture's team adapted quickly to our evolving requirements, and their effective communication ensured that our employees embraced the new system. We\'ve seen a significant improvement in customer satisfaction and operational efficiency since the implementation.\"<br><br>Leading E-commerce Retailer:<br>\"We engaged Accenture to develop a help desk solution to manage the growing volume of customer inquiries. Their agile approach allowed us to iteratively refine the solution, ensuring it met our unique needs. Accenture's change management strategy facilitated a smooth transition for our support staff and customers, resulting in minimal disruption during the implementation. The new help desk solution has greatly improved our response times and customer satisfaction.\"<br><br>Global Financial Institution:<br>\"We chose Accenture to implement a help desk solution to better manage our IT support requests. Their agile methodology experience enabled them to rapidly deliver a solution that addressed our specific challenges. Accenture's comprehensive change management plan ensured that our employees were well-prepared for the new system and that the transition was seamless. The help desk solution has greatly improved our IT support efficiency and reduced overall resolution times.\"<br><br>These testimonials showcase Accenture's successful track record in implementing help desk solutions, highlighting the value of agile methodology and change management expertise in delivering positive outcomes for clients.",
        "Share example biographies of the team members.": "Project Manager (John Smith): John Smith has over 12 years of experience in project management and has led numerous help desk solution implementations for clients across various industries. As a certified Project Management Professional (PMP) and Scrum Master, John excels in applying Agile methodologies to deliver projects on time and within budget. He is known for his excellent communication and collaboration skills, fostering positive relationships with clients and project teams.<br><br>Technical Lead (Jane Doe): Jane Doe is a highly skilled software engineer with 10 years of experience in help desk solution development and integration. She holds a Master's degree in Computer Science and is a certified Scrum Master. Jane has led technical teams in designing and implementing custom help desk solutions for clients in the telecommunications, retail, and finance sectors. Her expertise in system integrations and Agile practices ensures seamless and efficient project execution.<br><br>Business Analyst (Tom Brown): Tom Brown has 8 years of experience as a business analyst, focusing on help desk solutions and customer support processes. He holds an MBA and is a certified Agile Business Analyst. Tom excels at understanding clients' business requirements and translating them into functional specifications. His strong analytical and problem-solving skills enable him to design effective solutions tailored to the unique needs of each client.<br><br>Change Management Specialist (Mary Johnson): Mary Johnson has 7 years of experience in change management and organizational development. She holds a Master's degree in Organizational Psychology and is a certified Prosci Change Management Practitioner. Mary has successfully guided clients through large-scale help desk solution implementations, ensuring that employees and customers are well-prepared for the new systems. Her expertise in communication, training, and stakeholder engagement enables a smooth transition during the implementation process.<br><br>Quality Assurance Engineer (Nancy Green): Nancy Green is a detail-oriented quality assurance engineer with 6 years of experience in testing and validating help desk solutions. She holds a Bachelor's degree in Computer Engineering and is a certified ISTQB Foundation Level Tester. Nancy's expertise in test planning, execution, and reporting ensures that the implemented help desk solutions meet the highest quality standards and function as intended for clients across various industries.",
    };

    var responseElements = [];
    var responseTexts = [];
    var sparkAiQ = 'Provide an overview of your company';
    var sparkAiSuggestion = "Accenture's Agile capabilities have been a cornerstone of our success in delivering world-class software solutions to our clients. Our commitment to Agile methodologies ensures that we consistently provide high-quality, adaptable, and efficient solutions while fostering a collaborative and transparent environment. With extensive experience in implementing Agile practices, such as Scrum, Kanban, and Lean, our expert teams are adept at managing projects of varying size and complexity.<br><br>Our Agile approach focuses on iterative development, continuous improvement, and rapid response to change. By organizing our teams into cross-functional units and employing Agile ceremonies like daily stand-ups, sprint planning, and retrospectives, we ensure effective communication and collaboration throughout the development process. This enables our teams to prioritize tasks, adapt to changing requirements, and maintain a continuous feedback loop with our clients. Furthermore, our Agile capabilities are supported by state-of-the-art tools and platforms that streamline project management, automate testing, and enhance visibility into the development process.<br><br>Accenture's Agile capabilities not only deliver high-quality, scalable solutions but also allow our clients to actively participate in the development journey. This engagement fosters a sense of ownership and alignment between Accenture and its clients, ultimately leading to better understanding, shared goals, and long-term success. By embracing Agile practices, we are confident in our ability to help organizations like PG&E navigate the challenges of digital transformation and achieve lasting success through innovative and adaptable software solutions.";

    var dashboard = document.getElementById('dashboard');
    var proposals = document.getElementById('proposals');
    var knowledgeBase = document.getElementById('knowledgeBase');
    var detailsPane = document.getElementById('detailsPane');
    var uploadWrapper = document.getElementById('uploadWrapper');
    var titleDatesQuestionsWrapper = document.getElementById('titleDatesQuestionsWrapper');
    var questionsAnswersWrapper = document.getElementById('questionsAnswersWrapper');

    renderQuestions();
    renderQuestionsAnswers();

    function newProposal() {
        dashboard.hidden = true;
        proposals.hidden = false;
        knowledgeBase.hidden = true;
    }

    function manageKnowledgeBase() {
        dashboard.hidden = true;
        proposals.hidden = true;
        knowledgeBase.hidden = false;
    }

    function step1() {
        uploadRfpButton = document.getElementById('uploadRfp');
        var origHTML = uploadRfpButton.innerHTML;
        uploadRfpButton.classList.add('disabled');
        uploadRfpButton.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Uploading...';
        setTimeout(function() {
            uploadRfpButton.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Analyzing...';
        }, 1500);
        setTimeout(function() {
            uploadRfpButton.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Generating...';
        }, 3000);
        setTimeout(function() {
            uploadRfpButton.classList.remove('disabled');
            uploadRfpButton.innerHTML = origHTML;
            uploadWrapper.hidden = true;
            titleDatesQuestionsWrapper.hidden = false;
        }, 4500);
    }

    function step2() {
        autoRespondButton = document.getElementById('autoRespondButton');
        var origHTML = autoRespondButton.innerHTML;
        autoRespondButton.classList.add('disabled');
        autoRespondButton.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Retrieving...';
        setTimeout(function() {
            autoRespondButton.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Analyzing...';
        }, 1500);
        setTimeout(function() {
            autoRespondButton.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Generating...';
        }, 3000);
        setTimeout(function() {
            autoRespondButton.classList.remove('disabled');
            autoRespondButton.innerHTML = origHTML;
            titleDatesQuestionsWrapper.hidden = true;
            detailsPane.hidden = false;
            questionsAnswersWrapper.hidden = false;
            window.scrollTo(0, 0);
            populateAnswers();
        }, 4500);
    }

    function renderQuestions() {
        var wrapper = document.getElementById('questionsWrapper');

        for (let q in questions)
        {
            var inputGroup = document.createElement('div');
            inputGroup.setAttribute('class', 'input-group mb-3');
            wrapper.appendChild(inputGroup);

            var btnGrip = document.createElement('button');
            btnGrip.setAttribute('class', 'disabled btn btn-outline-secondary');
            btnGrip.setAttribute('type', 'button');
            btnGrip.innerHTML = '<i class="fa-solid fa-grip-vertical"></i>';
            inputGroup.appendChild(btnGrip);

            var input = document.createElement('input');
            input.setAttribute('type', 'text');
            input.setAttribute('class', 'form-control');
            input.setAttribute('value', q);
            inputGroup.appendChild(input);

            var btnDelete = document.createElement('button');
            btnDelete.setAttribute('class', 'disabled btn btn-outline-danger');
            btnDelete.setAttribute('type', 'button');
            btnDelete.innerHTML = '<i class="fa-regular fa-trash-can"></i>';
            inputGroup.appendChild(btnDelete);
        }
    }

    function renderQuestionsAnswers() {
        var wrapper = document.getElementById('questionsAnswersWrapper');
        for (let q in questions)
        {
            var card = document.createElement('div');
            card.setAttribute('class', 'card mb-3');
            card.setAttribute('id', 'sparkAiCard');
            wrapper.appendChild(card);

            var header = document.createElement('div');
            header.setAttribute('class', 'card-header');
            card.appendChild(header);

            var title = document.createElement('h5');
            title.setAttribute('class', 'card-title');
            title.innerHTML = q;
            header.appendChild(title);

            var body = document.createElement('div');
            body.setAttribute('class', 'card-body');
            card.appendChild(body);

            var textarea = document.createElement('div');
            textarea.setAttribute('class', 'form-control');
            textarea.setAttribute('style', 'height: 15em; overflow-y: auto');
            if (q.startsWith(sparkAiQ)) {
                textarea.setAttribute('id', 'sparkAiTextarea');
            }
            body.appendChild(textarea);

            var footer = document.createElement('div');
            footer.setAttribute('class', 'card-footer');
            card.appendChild(footer);

            var lastUpdated = document.createElement('small');
            lastUpdated.setAttribute('class', 'card-text text-body-secondary float-start mt-2 d-none d-sm-block');
            lastUpdated.innerHTML = 'Last updated just now';
            footer.appendChild(lastUpdated);

            var btnGroup = document.createElement('div');
            btnGroup.setAttribute('class', 'float-end d-flex');
            footer.appendChild(btnGroup);

            var assistantBtnGroup = document.createElement('div');
            assistantBtnGroup.setAttribute('class', 'btn-group');
            btnGroup.appendChild(assistantBtnGroup);

            var assistantBtn = document.createElement('button');
            assistantBtn.innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> Spark AI';
            assistantBtn.setAttribute('class', 'btn btn-outline-info');
            assistantBtn.setAttribute('type', 'button');
            if (q.startsWith(sparkAiQ)) {
                assistantBtn.disabled = false;
                assistantBtn.onclick = triggerSparkAi;
            } else {
                assistantBtn.disabled = true;
            }
            assistantBtnGroup.appendChild(assistantBtn);

            var assistantDropdown = document.createElement('button');
            assistantDropdown.setAttribute('class', 'btn btn-outline-info dropdown-toggle dropdown-toggle-split me-2');
            assistantDropdown.setAttribute('data-bs-toggle', 'dropdown');
            assistantDropdown.setAttribute('aria-expanded', 'false');
            assistantDropdown.innerHTML = '<span class="visually-hidden">Toggle Dropdown</span>';
            assistantBtnGroup.appendChild(assistantDropdown);

            var assistantMenu = document.createElement('ul');
            assistantMenu.setAttribute('class', 'dropdown-menu');
            assistantMenu.innerHTML += '<li><a class="dropdown-item text-info" href="#">Auto-respond</a></li>';
            assistantMenu.innerHTML += '<li><hr></li>';
            assistantMenu.innerHTML += '<li><a class="dropdown-item text-info" href="#">Elaborate</a></li>';
            assistantMenu.innerHTML += '<li><a class="dropdown-item text-info" href="#">Shorten</a></li>';
            assistantMenu.innerHTML += '<li><a class="dropdown-item text-info" href="#">Simplify language</a></li>';
            assistantBtnGroup.appendChild(assistantMenu);

            var actionsDropdown = document.createElement('div');
            actionsDropdown.setAttribute('class', 'dropdown');
            btnGroup.appendChild(actionsDropdown);

            var actionsBtn = document.createElement('button');
            actionsBtn.innerHTML = '<i class="fa-solid fa-gear"></i>';
            actionsBtn.setAttribute('class', 'btn btn-outline-secondary dropdown-toggle me-2');
            actionsBtn.setAttribute('type', 'button');
            actionsBtn.setAttribute('data-bs-toggle', 'dropdown');
            actionsDropdown.appendChild(actionsBtn);

            var actionsMenu = document.createElement('ul');
            actionsMenu.setAttribute('class', 'dropdown-menu');
            actionsMenu.innerHTML += '<li><a disabled class="dropdown-item" href="#">Assign</a></li>';
            actionsMenu.innerHTML += '<li><a disabled class="dropdown-item" href="#">Submit for review</a></li>';
            actionsMenu.innerHTML += '<li><a disabled class="dropdown-item" href="#">Delete</a></li>';
            actionsDropdown.appendChild(actionsMenu);

            var detailsBtn = document.createElement('button');
            detailsBtn.innerHTML = '<i class="fa-solid fa-ellipsis-vertical"></i>';
            detailsBtn.setAttribute('class', 'btn btn-outline-secondary');
            detailsBtn.disabled = true;
            btnGroup.appendChild(detailsBtn);

            responseElements.push(textarea);
            responseTexts.push(questions[q]);
            wrapper.appendChild(card);
        }
    }

    function populateAnswers() {
        for (let i=0; i<responseElements.length; i++) {
            typewriter(responseElements[i], responseTexts[i]);
        }
    }

    function typewriter(element, text) {
        var elementText = element.innerHTML.split(/(\s+)/);
        var totalText = text.split(/(\s+)/);
        if (elementText.length < totalText.length + 1) {
            element.innerHTML += totalText[elementText.length-1];
            element.innerHTML += " ";
            setTimeout(function() {typewriter(element, text)}, 50);
        }
    }

    function triggerSparkAi() {
        sparkAiCard = document.getElementById('sparkAiCard');
        sparkAiCard.classList.add('border-info');
        sparkAi = document.getElementById('sparkAi');
        sparkAi.classList.add('border-info');

        var sparkAiBody = document.getElementById('sparkAiBody');
        sparkAiBody = document.getElementById('sparkAiBody');
        sparkAiBody.innerHTML = '';
        sparkAiBody.innerHTML += '<div class="row"><div class="col-lg-10 offset-lg-2"><div class="card rounded-4 text-bg-info"><div class="card-body"><p class="card-text">Bring out our agile capabilities more.</p></div></div></div></div>';
        setTimeout(function() {
            sparkAiBody.innerHTML += '<div class="row mt-2"><div class="col-lg-10"><div class="card rounded-4 text-bg-light"><div class="card-body"><p class="card-text" id="sparkAiSuggestion"></p><button class="btn btn-outline-secondary" onclick="acceptSparkAi()">Accept</button></div></div></div></div>';
            typewriter(document.getElementById('sparkAiSuggestion'), sparkAiSuggestion);
        }, 1000);
    }

    function acceptSparkAi() {
        textarea = document.getElementById('sparkAiTextarea');
        textarea.innerHTML = sparkAiSuggestion;
    }

    function trainDocuments() {
        button = document.getElementById('trainDocumentsButton');
        var origHTML = button.innerHTML;
        button.classList.add('disabled');
        button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Uploading...';
        setTimeout(function() {
            button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Analyzing...';
        }, 1500);
        setTimeout(function() {
            button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Training...';
        }, 3000);
        setTimeout(function() {
            button.classList.remove('disabled');
            button.innerHTML = origHTML;
        }, 4500);
    }

    function trainWebsite() {
        button = document.getElementById('trainWebsiteButton');
        var origHTML = button.innerHTML;
        button.classList.add('disabled');
        button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Retrieving...';
        setTimeout(function() {
            button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Analyzing...';
        }, 1500);
        setTimeout(function() {
            button.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Training...';
        }, 3000);
        setTimeout(function() {
            button.classList.remove('disabled');
            button.innerHTML = origHTML;
        }, 4500);
    }

    function reset() {
        dashboard.hidden = false;
        proposals.hidden = true;
        knowledgeBase.hidden = true;

        uploadWrapper.hidden = false;
        titleDatesQuestionsWrapper.hidden = true;
        questionsAnswersWrapper.hidden = true;
        detailsPane.hidden = true;

        for (let i=0; i<responseElements.length; i++) {
            responseElements[i].innerHTML = '';
        }

        document.getElementById('sparkAiCard').classList.remove('border-info');
        document.getElementById('sparkAi').classList.remove('border-info');
        var sparkAiBody = document.getElementById('sparkAiBody');
        sparkAiBody.innerHTML = '<div class="text-secondary text-center my-5">Ask me anything.</div>';
    }
</script>