feat:add o icone novo do chat e mudando o footer

ResidenciaTICBrisa · Aug 9, 2024 · e566425 · e566425
2 parents 4381b06 + ad9fe10
commit e566425
Show file tree

Hide file tree

Showing 7 changed files with 400 additions and 12 deletions.
diff --git a/.github/workflows/build_docker.yml b/.github/workflows/build_docker.yml
@@ -0,0 +1,81 @@
+name: Docker
+on:
+  push:
+  release:
+    types: [published]
+permissions:
+  contents: read
+
+jobs:
+  build_and_push_docker:
+    permissions:
+      packages: write
+      contents: none
+    name: Build and Push Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@main
+        with:
+          token: ${{ secrets.PIPELINE_TOKEN }}
+          submodules: true
+      # Create an array of version to push to the Dockerhub registry
+      - name: Prepare
+        id: prep
+        run: |
+          TAG=$(echo $(git describe ${{ github.sha }} --tags)) ## Get the tags from the SHA hash
+          VALID_TAG="^v[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$"  ## Will match Tags in the following format v123.231.123 or v1.2.3 will discard the following format v1.2.4-<revision>
+          DOCKER_IMAGE=botpress/server
+          VERSION=()
+          TAGS=()
+          if [[ $TAG =~ $VALID_TAG ]]; then
+            VERSION+=($(echo ${TAG} | sed -r 's/v//')) # transform v12.23.0 to 12.23.0
+            VERSION+=('latest')
+            VERSION+=($(echo ${TAG} | sed -r 's/\./_/g')) # Transform v12.13.0 to v12_13_0 ## Added backward compatibility
+            echo ::set-output name=release::"true"
+            TAGS+=("${VERSION[@]/#/${DOCKER_IMAGE}:}")
+          elif [[ $GITHUB_REF == refs/heads/* ]]; then
+            VERSION+=($(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')) # transform feature/00-feature-branch to feature-00-feature-branch
+          fi
+          GITHUB_REGISTRY="ghcr.io/${{ github.repository_owner }}/${DOCKER_IMAGE}"
+          TAGS+=("${VERSION[@]/#/${GITHUB_REGISTRY}:}")
+          IFS=,
+          echo ::set-output name=version::${VERSION[*]}
+          echo ::set-output name=tags::"${TAGS[*]}"
+          echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - name: Build
+        run: |
+          export npm_config_target_platform=linux
+          export EDITION=pro
+          git submodule update --init
+          yarn --force --ignore-engines --frozen-lockfile
+          yarn run build --linux --prod --verbose
+          yarn run package --linux
+          cp build/docker/Dockerfile packages/bp/binaries/
+      - name: DockerHub Authentication
+        uses: docker/login-action@v1
+        if: ${{ steps.prep.outputs.release }}
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.PIPELINE_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: ./packages/bp/binaries
+          push: true
+          tags: ${{ steps.prep.outputs.tags }}
+          labels: |
+            org.opencontainers.image.source=${{ github.event.repository.html_url }}
+            org.opencontainers.image.created=${{ steps.prep.outputs.created }}
+            org.opencontainers.image.revision=${{ github.sha }}
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+  <div>
+    <script src="http://localhost:3000/assets/modules/channel-web/inject.js"></script>
+    <script>
+        window.botpressWebChat.init({
+        host: "http://localhost:3000",
+        botId: "chatbot_botao_v2_18_06",
+        extraStylesheet: "http://localhost:3000/assets/modules/channel-web/style.css",
+        layoutWidth: "-",
+        showPoweredBy: true,
+        enableTranscriptDownload: false, 
+        enableConversationDeletion: false,
+        enableReset: false,
+        showConversationsButton: false,
+        botName: "Ziralda - Assistente",
+        enablePersistHistory: false})
+        window.addEventListener('message', function(event) {
+          if (event.data.name === 'webchatReady') {
+            window.botpressWebChat.sendEvent({
+              type: 'proactive-trigger',
+              channel: 'web',
+              payload: { text: 'oi' }
+            });
+          }
+        })
+    </script>
+    <script>
+
+    </script>
+  </div>
+</body>
+</html>
diff --git a/modules/channel-web/assets/style.css b/modules/channel-web/assets/style.css
@@ -0,0 +1,273 @@
+/* This CSS rule sets the default font size of the entire document */
+/* gov_blue: #1351b4 */
+/* editado 27/06 */
+html {
+  font-size: 16px;
+}
+
+/* These CSS rules sets the text direction of the paragraph (RTL or LTR) */
+p,
+.bpw-from-bot > div,
+#input-message {
+  direction: ltr;
+}
+
+/* This rule changes the color of the text in the input message */
+#input-message {
+  color: #000000;
+  display: none;
+}
+
+/* Changes the color of the new message indicator */
+.bpw-new-messages-indicator {
+  background-color: #f5f5f5;
+  color: #1351b4;
+}
+
+/* Styling for the chat header container */
+.bpw-header-container {
+  margin-top: 0px;
+  margin-bottom: 10px;
+  margin-left: 0px;
+  margin-right: 0px;
+  background: #1351b4;
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+  border: 1px;
+  border-radius: 10px;
+  color: #bpw;
+}
+
+.ffffff-header-name{
+  color: #ffffff;
+}
+
+/* Styling for the typing bubble */
+.bpw-typing-bubble {
+  background: #000000;
+}
+
+/* Styling for the chat bubble content */
+.bpw-chat-bubble-content {
+  background-color: #f5f5f5;
+  border-radius: 0px;
+}
+
+/* Styling for the date container, header name, and header subtitle */
+.bpw-header-name,
+.bpw-header-subtitle {
+  color: #ffffff;
+}
+
+/* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble */
+.bpw-layout {
+  width: 92%;
+  height: 75%;
+  border-radius: 10px;
+  right: 10px;
+  bottom: 5px;
+  border: 1px;
+}
+/* Responsive design rules for devices with width less than or equal to 450px */
+@media screen and (max-width: 450px){
+  .bpw-layout {
+    width: 100%;
+    height: 100%;
+    right: 0;
+    bottom: 0;
+    border-radius: 0;
+  }
+}
+
+/* Changes the fill color of the header icons to white */
+.bpw-header-icon,
+.bpw-header-icon svg,
+.bpw-header-icon svg path {
+  fill: #ffffff !important;
+}
+
+/* Changes the color of the placeholder text in the input message */
+#input-message::placeholder {
+  color: rgba(0,0,0,.30);
+}
+
+.bpw-composer textarea{
+  outline: none !important;
+  border: 1px solid rgba(0,0,0,.15);
+}
+.bpw-composer textarea:focus{
+  outline: none !important;
+  border: 1px solid rgba(0,0,0,.30);
+}
+
+/* Styling for the keyboard single choice option */
+.bpw-keyboard-single-choice {
+  background-color: #ffffff;
+  border: none;
+}
+
+/* Styling for the buttons in the chat interface */
+.bpw-button,
+.bpw-button-alt {
+  background-color: #EDF5FF;
+  color: #000000;
+  border-radius: 20px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  border: none;
+}
+
+
+/* Styling for hover effect on the buttons in the chat interface */
+.bpw-button:hover,
+.bpw-button-alt:hover {
+  background-color: #f5f5f5;
+}
+
+
+/* Styling for hyperlinks in the chat interface */
+a {
+  color: #000000;
+  text-decoration: underline;
+}
+
+/* Styling for the chat container, including color, scrollbar width and color, and border */
+.bpw-chat-container {
+  background-color: #f5f5f5;
+  scrollbar-width: thin;
+  scrollbar-color: #f5f5f5 #f5f5f5;
+  border: none;
+}
+
+/* Styling for the chat bubble content when it's from the bot */
+.bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content {
+  background-color: #ffffff;
+  color: #000000;
+  border: 0.05px solid #bbbbbb;
+  border-radius: 3px;
+}
+
+/* Styling for the chat bubble content when it's from the user */
+.bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content {
+  background-color: #EDF5FF;
+  border-radius: 20px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  color: #000000;
+}
+
+/* Styling for the composer section of the chat interface */
+.bpw-composer {
+  background-color: #ffffff;
+  border-top: none;
+}
+
+
+/* Styling for the scrollbar in the chat container */
+.bpw-chat-container::-webkit-scrollbar,
+.bpw-chat-container::-moz-scrollbar {
+  width: 10px;
+  background-color: #ffffff;
+  border: none;
+}
+
+/* Styling for the avatar of the bot */
+.bpw-bot-avatar img,
+.bpw-bot-avatar svg {
+  background: #000000;
+  border: 0.1px solid #bbbbbb;
+}
+
+/* Styling for the general scrollbar in the web page */
+::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+/* Styling for the track of the general scrollbar and the chat container scrollbar */
+::-webkit-scrollbar-track,
+.bpw-chat-container::-webkit-scrollbar-track,
+.bpw-chat-container::-moz-scrollbar-track {
+  background-color: transparent;
+}
+
+/* Styling for the thumb of the general scrollbar and the chat container scrollbar */
+::-webkit-scrollbar-thumb,
+.bpw-chat-container::-webkit-scrollbar-thumb,
+.bpw-chat-container::-moz-scrollbar-thumb {
+  background-color: #ffffff;
+  border-radius: 1rem;
+  border: 0.5rem solid transparent;
+}
+
+/* Styling for the floating button icon in the chat interface */
+/*.bpw-floating-button i svg path {
+  fill: #6675fa;
+}*/
+
+
+
+/* Styling for the 'powered by' section of the chat interface */
+.bpw-powered {
+  text-align: center;
+  padding: 10px;
+  color: #ffffff;
+  background: #1351B4;
+  font-size: 14px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+/* Styling for the hyperlinks in the 'powered by' section of the chat interface */
+.bpw-powered a {
+  color: #000000;
+  text-decoration: underline;
+}
+
+/* Styling for hover effect on the hyperlinks in the 'powered by' section of the chat interface */
+.bpw-powered a:hover {
+  text-decoration: underline;
+}
+
+.bpw-send-button{
+  background: #1351b4;
+  color: #ffffff;
+}
+
+.bpw-send-button:hover {
+  background: #c8c8c8;
+}
+
+/* Change Bot Widget Icon */
+@keyframes fadeColor {
+  0% {
+    background: #1351b4; /* Start color */
+  }
+  100% {
+    background: #3C3C3C; /* End color */
+  }
+}
+.bpw-widget-btn{
+  border-radius: 50%;
+  background:#1351b4;
+}
+
+/* .bpw-widget-btn:hover{
+  border-radius: 50%;
+  animation: fadeColor 0.5s forwards;
+} */
+
+.bpw-floating-button::before {
+  background:url("Avatar_ChatBot_Brasil_Participativo.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  height:undefinedpx !important;
+  width:undefinedpx !important;
+}
+
+.bpw-floating-button {
+  box-shadow: none !important;
+}
+
+.bpw-floating-button:hover {
+  box-shadow: none !important;
+}