[feature] Embed assistants #1489

mishig25 · 2024-09-25T13:44:20Z

Description

Users can now create tools and connect their tools to their assistants (read here), making for use cases such as: create an assistant that queries your websites and chats about your website.

This PR adds an ability where users can embed their assistants on their websites.

Step1: under assistants settings, there will be script tag that can be put on a website's html head section.

Step2: HF Chat button will appear on the bottom right section of your website.

Step3: When you click on HF Chat button, a chat window modal with minimal hf/hf-chat chrome will appear

Testing locally

follow the latest readme on how to run chat-ui locally
read this comment

Reviewing

when reviewing make sure to click Hide whitespace to see the actual diff

Screen recording

Screen.Recording.2024-09-28.at.11.00.44.mov

it may look bit confusing in the video because I'm embedding hf-chat inside hf-chat locally for testing purposes. but you can imagine the hf-chat modal being embedded on any arbitrary website

gary149 · 2024-09-27T12:44:04Z

src/routes/api/assistant/[id]/embed-snippet/+server.ts

+
+	document.addEventListener('DOMContentLoaded', function() {
+		const button = document.createElement('button');
+		button.className = 'fixed bottom-5 right-5 z-50 px-1.5 py-1 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center focus:outline-none';


how is it going to work with tailwindcss?

will convert it back to regular css once we agree on the design

mishig25 · 2024-09-28T08:58:32Z

src/routes/+layout.svelte

+	<!-- TODO: remove -->
+	{#if !$page.data.embeddedAssistantId}
+		<script
+			src="http://localhost:5173/chat/api/assistant/{$page.data.assistants.at(-1)
+				._id}/embed-snippet"
+			defer
+		></script>
+	{/if}


to make testing the embedded assistants easier, I'm embedding hf assistant inside the chat-ui. These lines would be removed before merging to main.

you can change {$page.data.assistants.at(-1)._id} this part that grabs the last assistant id to any specific local assistant id if you want

nsarrazin · 2024-09-30T07:00:25Z

this is really cool! will do a deeper review but loving this already 🚀

nsarrazin

works great ! found one bug and the rest are more open ended comments, let me know what you think!

src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

nsarrazin · 2024-09-30T10:18:26Z

src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

@@ -194,6 +199,26 @@
 		</div>
 	</div>

+	<div>
+		<h2 class="b-2 inline font-semibold">Embed this assistant</h2>


just my opinion but I think this is kind of an advanced feature and it's very visible in the UI of assistants atm

Maybe a button that copies the code to clipboard with an explainer text would be enough and take less space ?

As it can grow the usage of HuggingChat I think it's fine if it's stays well visible.

nsarrazin · 2024-09-30T10:21:28Z

src/routes/api/assistant/[id]/embed-snippet/+server.ts

+	const script = `(function() {
+	function resizeIframeToContentSize(iframe) {


nice, i'm curious if there's a way to do this that's more maintainable ? it works great but i can imagine it would be very difficult to modify in the future

i know there's a render() method from svelte you can use to get the HTML for a component, we use something similar in thumbnails (

chat-ui/src/routes/assistant/[assistantId]/thumbnail.png/+server.ts

Lines 44 to 55 in c544c28

const renderedComponent = (ChatThumbnail as unknown as SvelteComponent).render({

name: assistant.name,

description: assistant.description,

createdByName: assistant.createdByName,

avatar,

});

const reactLike = html(

"<style>" + renderedComponent.css.code + "</style>" + renderedComponent.html

);

const svg = await satori(reactLike, {

) not sure how it handles javascript and idk if it's worth it but it could let you build this feature in a svelte component

or simpler, make the JS snippet completely static (a static file) that gets the assistant's id from a property in a <a> link inside the embedding webpage

nsarrazin · 2024-09-30T10:40:33Z

src/routes/api/assistant/[id]/embed-snippet/+server.ts

+export async function GET({ params }) {
+	const { id } = params;


very nit: should the route be called embed-snippet.js ?

Co-authored-by: Nathan Sarrazin <[email protected]>

nsarrazin · 2024-09-30T14:47:10Z

src/routes/api/assistant/[id]/embed-snippet/+server.ts

+		const iframe = document.createElement('iframe');
+		iframe.className = 'w-full';
+		iframe.style.height = '400px'; // Set an initial height
+		iframe.src = \`http://localhost:5173/chat/?embeddedAssistantId=${id}\`;


this will have to be configurable using the base path I guess in order to work on self-hosted versions

nsarrazin · 2024-09-30T14:48:12Z

just thinking out loud, would it be interesting to have the script try to find an existing button in the dom?

for example if there's already a button with id assistant-show on the page we can hook the modal display to it.

This would let people integrate the button where they want on the page with their own styling, with fallback on the absolutely positioned button

mishig25 force-pushed the embed_assistant branch 2 times, most recently from 3194ba5 to 54f1570 Compare September 27, 2024 11:57

gary149 reviewed Sep 27, 2024

View reviewed changes

mishig25 force-pushed the embed_assistant branch 7 times, most recently from ed116a5 to 8749982 Compare September 28, 2024 03:25

mishig25 changed the title ~~embed assistants~~ [feature] Embed assistants Sep 28, 2024

wip

fb52674

mishig25 force-pushed the embed_assistant branch from b19cc4b to fb52674 Compare September 28, 2024 03:30

mishig25 marked this pull request as ready for review September 28, 2024 03:37

mishig25 commented Sep 28, 2024

View reviewed changes

rm dev consoles

1e8f976

mishig25 requested review from gary149, julien-c and nsarrazin September 28, 2024 09:02

comment

c544c28

nsarrazin reviewed Sep 30, 2024

View reviewed changes

modal design

fa2f44d

nsarrazin reviewed Sep 30, 2024

View reviewed changes

gary149 and others added 2 commits September 30, 2024 12:51

remove close button

68e9950

Update src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

fa6edd6

Co-authored-by: Nathan Sarrazin <[email protected]>

nsarrazin reviewed Sep 30, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feature] Embed assistants #1489

[feature] Embed assistants #1489

mishig25 commented Sep 25, 2024 •

edited

Loading

gary149 Sep 27, 2024

mishig25 Sep 27, 2024

mishig25 Sep 28, 2024

nsarrazin commented Sep 30, 2024

nsarrazin left a comment

nsarrazin Sep 30, 2024

gary149 Sep 30, 2024

julien-c Sep 30, 2024

nsarrazin Sep 30, 2024

julien-c Sep 30, 2024

julien-c Sep 30, 2024

nsarrazin Sep 30, 2024

nsarrazin Sep 30, 2024

nsarrazin commented Sep 30, 2024 •

edited

Loading

		const script = `(function() {
		function resizeIframeToContentSize(iframe) {

	const renderedComponent = (ChatThumbnail as unknown as SvelteComponent).render({
	name: assistant.name,
	description: assistant.description,
	createdByName: assistant.createdByName,
	avatar,
	});

	const reactLike = html(
	"<style>" + renderedComponent.css.code + "</style>" + renderedComponent.html
	);

	const svg = await satori(reactLike, {

		export async function GET({ params }) {
		const { id } = params;

[feature] Embed assistants #1489

Are you sure you want to change the base?

[feature] Embed assistants #1489

Conversation

mishig25 commented Sep 25, 2024 • edited Loading

Description

Testing locally

Reviewing

Screen recording

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nsarrazin commented Sep 30, 2024

nsarrazin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nsarrazin commented Sep 30, 2024 • edited Loading

mishig25 commented Sep 25, 2024 •

edited

Loading

nsarrazin commented Sep 30, 2024 •

edited

Loading