Skip to content

Commit

Permalink
Dynamic chatbot visible (#330)
Browse files Browse the repository at this point in the history
Skrev om chatbot til å være klientsiderendret for at den skal kulle
reagere på endringer av params.
  • Loading branch information
andnorda authored Jul 1, 2024
1 parent 8ea0627 commit 330c92b
Show file tree
Hide file tree
Showing 18 changed files with 469 additions and 260 deletions.
7 changes: 3 additions & 4 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
} from "@storybook/addon-viewport";
import { texts } from "../packages/server/src/texts";
import { ClientTexts } from "decorator-shared/types";
import { updateDecoratorParams } from "decorator-client/src/params";

declare global {
interface Window {
Expand Down Expand Up @@ -62,10 +63,8 @@ const preview: Preview = {

const language = context.globals.locale;

window.__DECORATOR_DATA__ = {
params: { language },
texts: texts[language],
};
window.__DECORATOR_DATA__.texts = texts[language];
updateDecoratorParams({ language });

if (story === null) {
return "";
Expand Down
5 changes: 3 additions & 2 deletions packages/client/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import "./main.css";
import { env, hasParam, param, updateDecoratorParams } from "./params";
import { useLoadIfActiveSession } from "./screensharing";
import "./views/breadcrumb";
import "./views/chatbot-wrapper";
import "./views/chatbot";
import "./views/context-link";
import "./views/decorator-utils";
import "./views/dropdown-menu";
Expand Down Expand Up @@ -82,9 +82,10 @@ window.addEventListener("message", (e) => {
"availableLanguages",
"utilsBackground",
"language",
"chatbotVisible",
] satisfies ParamKey[]
).forEach((key) => {
if (payload[key]) {
if (payload[key] !== undefined) {
updateDecoratorParams({
[key]: payload[key],
});
Expand Down
33 changes: 18 additions & 15 deletions packages/client/src/utils.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
// @NOTE: can maybe use HTML rewriter here to append scripts based on cookies?
export const loadedScripts = new Set<string>();
export const loadedScripts = new Map<string, Promise<void>>();

export const loadExternalScript = (uri: string, async = true) => {
return new Promise<void>((resolve) => {
if (loadedScripts.has(uri)) {
return resolve();
}

loadedScripts.add(uri);
const script = document.createElement("script");
if (async) {
script.async = true;
}
script.src = uri;
export const loadExternalScript = (
uri: string,
async = true,
): Promise<void> => {
const existing = loadedScripts.get(uri);
if (existing) {
return existing;
}
const script = document.createElement("script");
if (async) {
script.async = true;
}
script.src = uri;
const promise = new Promise<void>((resolve) => {
script.onload = () => {
resolve();
};
document.body.appendChild(script);
});
loadedScripts.set(uri, promise);
document.body.appendChild(script);
return promise;
};
150 changes: 0 additions & 150 deletions packages/client/src/views/chatbot-wrapper.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* Styles */
.chatbot {
.button {
appearance: none;
background: #fff;
padding: 8px 15px;
Expand All @@ -24,7 +23,7 @@
0 0 0 6px rgba(0, 0, 0, 0.1);
}

.chatbot.extraVisible {
.button.visible {
transform: scale(1);
opacity: 1;
transition:
Expand All @@ -34,7 +33,7 @@
}

@media (hover: hover) {
.chatbot:hover {
.button:hover {
background-color: var(--a-blue-800);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.6),
Expand All @@ -44,7 +43,7 @@
}
}

.chatbot:focus {
.button:focus {
background: var(--a-blue-800);
outline: none;
box-shadow:
Expand All @@ -55,7 +54,7 @@
}

@media (min-width: 480px) {
.chatbot {
.button {
margin-right: 35px;
margin-bottom: 23.3333px;
padding: 8px 15px;
Expand All @@ -65,7 +64,7 @@
}

@media (min-width: 580px) {
.chatbot {
.button {
bottom: 25px;
right: 25px;
}
Expand All @@ -83,12 +82,12 @@
vertical-align: top;
}

.chatbot:hover .chatbotWrapper,
.chatbot:focus .chatbotWrapper {
.button:hover .chatbotWrapper,
.button:focus .chatbotWrapper {
transform: translateY(-50%) scale(1.1);
}

.chatbotWrapper svg {
.chatbotWrapper .svg {
width: 100%;
height: 100%;
border-radius: 70px;
Expand All @@ -112,7 +111,7 @@
}

@media (hover: hover) {
.chatbot:hover .chatbotWrapper:before {
.button:hover .chatbotWrapper:before {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 0 6px var(--a-blue-800),
Expand All @@ -123,7 +122,7 @@
}
}

.chatbot:focus .chatbotWrapper:before {
.button:focus .chatbotWrapper:before {
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.3),
0 0 0 6px var(--a-blue-800),
Expand Down
24 changes: 24 additions & 0 deletions packages/client/src/views/chatbot.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import type { Meta, StoryObj } from "@storybook/html";
import "./chatbot";

const meta: Meta = {
title: "chatbot",
tags: ["autodocs"],
render: () => {
const wrapper = document.createElement("div");
wrapper.innerHTML = "<d-chatbot></d-chatbot>";

window.__DECORATOR_DATA__ = {
params: { chatbot: true, chatbotVisible: true },
features: { ["dekoratoren.chatbotscript"]: true },
env: { ENV: "production" },
} as any;

return wrapper;
},
};

export default meta;
type Story = StoryObj;

export const Default: Story = {};
Loading

0 comments on commit 330c92b

Please sign in to comment.