09a65f6f41* pause-at-angular * text-io-works-but-no-context * chat-widget-tsx * split-out-page * angular-section * mikes-edits-for-indentation * cleanup * indentation * Apply suggestions from code review Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com> * remove-widget-causing-scroll-problems --------- Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
35 lines
No EOL
900 B
TypeScript
35 lines
No EOL
900 B
TypeScript
import React, { useEffect } from 'react';
|
|
|
|
// Component to load the chat widget script
|
|
const ChatScriptLoader = () => {
|
|
useEffect(() => {
|
|
if (!document.querySelector('script[src*="langflow-embedded-chat"]')) {
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js';
|
|
script.async = true;
|
|
document.body.appendChild(script);
|
|
}
|
|
}, []);
|
|
|
|
return null;
|
|
};
|
|
|
|
declare global {
|
|
namespace JSX {
|
|
interface IntrinsicElements {
|
|
"langflow-chat": any;
|
|
}
|
|
}
|
|
}
|
|
|
|
export default function ChatWidget({ className }) {
|
|
return (
|
|
<div className={className}>
|
|
<ChatScriptLoader />
|
|
<langflow-chat
|
|
host_url="http://localhost:7860"
|
|
flow_id="YOUR_FLOW_ID"
|
|
></langflow-chat>
|
|
</div>
|
|
);
|
|
} |