adding website and github actions

.github/workflows/pull-request-to-main-branch.yml

@@ -0,0 +1,26 @@
+name: pull request to main branch and check if the build is successful
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      NODE_ENV: development
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
+        with:
+          persist-credentials: false
+      - name: Install and Build NPM 🔧
+        run: |
+          cd component
+          npm install
+          npm run build:module
+      - name: Install and Build Wesbite 🔧
+        run: |
+          cd website
+          npm install
+          npm run build

.github/workflows/push-to-issue-branch.yml

@@ -0,0 +1,26 @@
+name: push to issue branch and check if the build is successful
+on:
+  push:
+    branches:
+      - issue/*
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      NODE_ENV: development
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
+        with:
+          persist-credentials: false
+      - name: Install and Build NPM 🔧
+        run: |
+          cd component
+          npm install
+          npm run build:module
+      - name: Install and Build Wesbite 🔧
+        run: |
+          cd website
+          npm install
+          npm run build

.github/workflows/push-to-main-branch-deploy-gh-pages.yml

@@ -0,0 +1,32 @@
+name: push to main branch and deploy to the gh-pages branch
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      NODE_ENV: development
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
+        with:
+          persist-credentials: false
+      - name: Install and Build NPM 🔧
+        run: |
+          cd component
+          npm install
+          npm run build:module
+      - name: Install and Build Wesbite 🔧
+        run: |
+          cd website
+          npm install
+          npm run build
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@releases/v3
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: website/build # The folder the action should deploy from (source branch).

examples/nextjs/components/microphone.tsx

@@ -5,12 +5,24 @@ const recordingFilter =
   'brightness(0) saturate(100%) invert(12%) sepia(85%) saturate(7357%) hue-rotate(358deg) brightness(90%) contrast(111%)';
 const defaultFilter =
   'brightness(0) saturate(100%) invert(9%) sepia(0%) saturate(2096%) hue-rotate(257deg) brightness(99%) contrast(96%)';
+const hoverFilter =
+  'brightness(0) saturate(100%) invert(36%) sepia(0%) saturate(2087%) hue-rotate(147deg) brightness(95%) contrast(92%)';
 
 export default function Microphone(props: {isRecording: boolean}) {
+  const [filter, setFilter] = React.useState(defaultFilter);
+  React.useEffect(() => {
+    setFilter(props.isRecording ? recordingFilter : defaultFilter);
+  }, [props.isRecording]);
   return (
     <svg
       id={styles.microphone}
-      style={{filter: props.isRecording ? recordingFilter : defaultFilter}}
+      style={{filter}}
+      onMouseEnter={() => {
+        if (!props.isRecording) setFilter(hoverFilter);
+      }}
+      onMouseLeave={() => {
+        if (!props.isRecording) setFilter(defaultFilter);
+      }}
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >

examples/nextjs/pages/index.tsx

@@ -45,6 +45,8 @@ export default function IndexPage() {
           }}
         >
           <Microphone isRecording={isRecording}></Microphone>
+        </div>
+        <div>
           {isPreparing ? (
             <div>Connecting...</div>
           ) : isError ? (
@@ -57,7 +59,7 @@ export default function IndexPage() {
           id={styles.dropdown}
           value={activeService}
           onChange={(event) => {
-            changeService(isRecording, isPreparing);
+            changeService(isRecording, isPreparing, setIsError);
             setActiveService(event.target.value);
           }}
         >

examples/nextjs/utils/functionality/changeService.ts

@@ -1,6 +1,7 @@
 import SpeechToElement from 'speech-to-element';
 
-export function changeService(isRecording: boolean, isPreparing: boolean) {
+export function changeService(isRecording: boolean, isPreparing: boolean, setIsError: (state: boolean) => void) {
+  setIsError(false);
   if (isRecording) {
     SpeechToElement.stop();
   } else if (isPreparing) {

examples/ui/src/App.tsx

@@ -45,6 +45,8 @@ function App() {
           }}
         >
           <Microphone isRecording={isRecording}></Microphone>
+        </div>
+        <div>
           {isPreparing ? (
             <div>Connecting...</div>
           ) : isError ? (
@@ -57,7 +59,7 @@ function App() {
           id="dropdown"
           value={activeService}
           onChange={(event) => {
-            changeService(isRecording, isPreparing);
+            changeService(isRecording, isPreparing, setIsError);
             setActiveService(event.target.value);
           }}
         >

examples/ui/src/components/Microphone.tsx

@@ -1,15 +1,28 @@
+import React from 'react';
 import './Microphone.css';
 
 const recordingFilter =
   'brightness(0) saturate(100%) invert(12%) sepia(85%) saturate(7357%) hue-rotate(358deg) brightness(90%) contrast(111%)';
 const defaultFilter =
   'brightness(0) saturate(100%) invert(9%) sepia(0%) saturate(2096%) hue-rotate(257deg) brightness(99%) contrast(96%)';
+const hoverFilter =
+  'brightness(0) saturate(100%) invert(36%) sepia(0%) saturate(2087%) hue-rotate(147deg) brightness(95%) contrast(92%)';
 
 export default function Microphone(props: {isRecording: boolean}) {
+  const [filter, setFilter] = React.useState(defaultFilter);
+  React.useEffect(() => {
+    setFilter(props.isRecording ? recordingFilter : defaultFilter);
+  }, [props.isRecording]);
   return (
     <svg
       id="microphone"
-      style={{filter: props.isRecording ? recordingFilter : defaultFilter}}
+      style={{filter}}
+      onMouseEnter={() => {
+        if (!props.isRecording) setFilter(hoverFilter);
+      }}
+      onMouseLeave={() => {
+        if (!props.isRecording) setFilter(defaultFilter);
+      }}
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >

examples/ui/src/utils/changeService.ts

@@ -1,6 +1,7 @@
 import SpeechToElement from 'speech-to-element';
 
-export function changeService(isRecording: boolean, isPreparing: boolean) {
+export function changeService(isRecording: boolean, isPreparing: boolean, setIsError: (state: boolean) => void) {
+  setIsError(false);
   if (isRecording) {
     SpeechToElement.stop();
   } else if (isPreparing) {

examples/ui/src/utils/toggleSpeech.ts

@@ -37,7 +37,7 @@ export function toggleAzure(
     region: 'eastus',
     // Fetch a new token from the edge function (located in the api/token.ts file)
     retrieveToken: async () => {
-      return fetch('api/token')
+      return fetch('http://localhost:8080/token')
         .then((res) => res.text())
         .then((data) => {
           return data;

website/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,31 @@
+// WORK - refactor
+
+![Deep Chat](../../assets/readme/ui-example.png)
+
+<br>
+
+This is an example [Deep Chat](https://www.npmjs.com/package/deep-chat) UI project that can be used to communicate with the [example server](https://deepchat.dev/examples/servers) projects.
+
+### :computer: Local setup
+
+If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
+
+```
+git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+```
+
+Navigate to this directory and run the following command to download the dependencies:
+
+```
+npm install
+```
+
+Run the project:
+
+```
+npm run start
+```
+
+### :wrench: Improvements
+
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.