Giter Site home page Giter Site logo

chatbot-frontend's Introduction

chatbot-frontend

Based of the frontend from the Azure OpenAI demo.

dev

(see ReactJS documentation on how to install prerequisites for this project)

Just run npm run dev

pre-req

If you need to change your server to something else than http://localhost:5000 (normal local running instance of the api)

(see const server: string = process.env.VITE_API_BACKEND ?? "http://localhost:5000" from vite.config.ts) then you can do this below:

First setup your .env so your calls can goto the python api:

echo "VITE_API_BACKEND=http://127.0.0.1:5000" > .env

NOTE: You can also export then env variable, it will take precedence on the .env file(s).

accessbility testing

npm install --save-dev accessibility-checker
# ensure app is running ...
npx achecker test/urls.txt

how it is ran in production

In "production" this server is ran via an Azure Linux web app and started via the http://127.0.0.1:5000 (auto build will run tsc && vite build and place it it dist/) then it is started with the NODE_ENV=production node server.js command.

PORT=8080 is defined on Azure via their /opt/startup/startup.sh bootstrapped script and so the instance will run on that port (you also can do the same locally via .env)

Documentation

chatbot-frontend's People

Contributors

guillaumeturcotte avatar sanjeeveasparan avatar

Watchers

avatar

chatbot-frontend's Issues

markdown support for Ask GPT-4

Something to support markdown in answers such as npm install react-markdown .

import React from 'react';  
import ReactMarkdown from 'react-markdown';  
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';  
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';  
  
const renderers = {  
    code: ({language, value}) => {  
        return <SyntaxHighlighter style={solarizedlight} language={language} children={value} />  
    }  
}  
  
const MyComponent = ({ markdownContent }) => {  
    return (  
        <ReactMarkdown renderers={renderers}>  
            {markdownContent}  
        </ReactMarkdown>  
    );  
};  
  
export default MyComponent;

enable history usage

the backend api returns history of the conversation that happens and can re-use it.

  • add boolean flag controlled by dev options, to turn off or on the history usage in the chat
  • reset history on click of the Clear conversation,
  • history usage enabled by default

no answer (no info in context found) UI helper

Sometimes when the calls do not return a good answer or none at all, there is often mention of "no answer found in the given context blah blah" we could have a little call that checks for the answer if it looks like it answered or not the question and if not we display a link to submit feedback or perhaps clear the context/chat history.

(this could even be another openai call to check if answer was given)

Enable proper error handling

Currently we get a dev page about how we don't have a default route for error handling. Need to configure one.

💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

api returns new metadata, update code to read new attributes

The new openai-app-poc metadata update due to the new SSC Plus data index needs to be reflected in the frontend of the code.

acceptance criteria

  • the frontend reads the backend api metadata properly
  • source is displayed properly
  • metadata is used properly (url, date, etc)

Chatbot meeting with Stakeholders

  • Review list of registered test users, Select(Handpick) stakeholders.
  • Send meeting invite to selected stakeholders
  • Meeting create agenda.

Chatbot typos (French)

Please modify the following typos in chatbot.

  1. Tapez votre question ici: -> Tapez votre question ici : - missing space before colon

  2. Essayez ces exemples: -> Essayez ces exemples : - missing space before colon

  3. Top left title in header. Keep the chatbot title same as email -> pilote du robot conversationnel d'Azure OpenAI

add thumbs up and down to answer

Need to add a thumbs down and up button to the answer and that would send a POST to the /feedback endpoint with the question and answer that was given.

Taskbot (with new AI suggestion)

  • Confirm the Business requirements with client (validate if AI is to be included in the solution)
  • Identify potential solution for client

Typos

From @davidsimard2

Couple of typos:
English version
Lets use the same title in the email
Welcome to the Azure OpenAI Chatbot pilot
French version:
Titre: Bienvenu missing an "e" -> Bienvenue au projet pilote du robot conversationnel d’Azure OpenAI
Change question Quelle est l’URL de l’application Archibus to "Comment accède-t-on à Archibus?"
Change tapper une question to Tapez votre question ici :

This will be fixed in #24

Differentiate Prod Chatbot from Dev

Right now the only way to know if you are using Prod or Dev chatbot is by looking at the URL.

Look at options of adding the name to the title, change the color scheme, other...

add flag to allow app to start without proper db connection

Currently if the app is started and there is an issue with the DB connection the startup will fail and it will hang (without an error?).

A flag could be added or maybe a warning message could be shown that the db is not properly setup but allow the app to start anyways.

success criteria

  • allow app to start without proper db configuration

Chatbot Evolution - connect to internet

  • Connect to internet.
  • need to determine when and how (various options)
  • New code or CanChat

Acceptance Criteria

  • add new panel where we can use OpenAI Directly
  • allow users to define the context prompt (always visible)
  • allow users to set dev options (like the current chat)

Accessibility Assessment of the app (for the pilot)

Digital Hour feedback

During digital hour we got feedback on the accessibility. Example:

  • I did a quick check, my keyboard cannot reach the "Clear chat" "SSC Early Adopters" and "Developer Settings" buttons, this will exclude many categories of users.

Accessibility contact

[email protected]

  • Meeting plan November 23rd

Success criteria

  • keyboard accessible
  • violation fixed (those fixables)
  • narrator test
  • Review of WCAG 2.1

story: add action to deploy to sandbox or dev

Story

We need a github action that will allow us to deploy code that was built and tested to sandbox or dev environement.

Acceptance Criteria

  • add github action that deploys to sandbox
  • add github action that deploys to dev

add local backend server to forward requests to api

We will add an extra layer for security and simplicity of configuration.

We will have a proxy server deployed on the same location as this server (https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/) example in this post, doesn't need to be identical but it's the same idea.

React is deployed on domain xyz-frontend and will also listen for request to /query those requests will be proxied, this means that we can lock down the API backend for requests that come from the same IP as the backend.

On top of that if we want we can also layer an API key mechanism but not necessary needed, this is only the first step:

  • add backend server listening and proxying request to /query (or whatever other endpoints we have in the api).
  • create another ticket in chatbot-infra to force ingress ip security

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.