jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added description to Chat Widget HTML and changed comment from code

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-26 16:04:11 -03:00
commit 8df8875e7e
4 changed files with 29 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -175,13 +175,21 @@ export default function CodeTabsComponent({
key={index} // Remember to add a unique key prop
>
{index < 4 ? (
<SyntaxHighlighter
className="mt-0 h-full w-full overflow-auto custom-scroll"
language={tab.mode}
style={oneDark}
>
{tab.code}
</SyntaxHighlighter>
<>
{tab.description && (
<div
className="mb-2 w-full text-left text-sm"
dangerouslySetInnerHTML={{ __html: tab.description }}
></div>
)}
<SyntaxHighlighter
className="mt-0 h-full w-full overflow-auto custom-scroll"
language={tab.mode}
style={oneDark}
>
{tab.code}
</SyntaxHighlighter>
</>
) : index === 4 ? (
<>
<div className="api-modal-according-display">

6
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -73,6 +73,8 @@ const ApiModal = forwardRef(
},
{
name: "Chat Widget HTML",
description:
"Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='www.google.com'>documentation</a>.",
mode: "html",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
@ -124,6 +126,8 @@ const ApiModal = forwardRef(
},
{
name: "Chat Widget HTML",
description:
"Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='www.google.com'>documentation</a>.",
mode: "html",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",
@ -163,6 +167,8 @@ const ApiModal = forwardRef(
},
{
name: "Chat Widget HTML",
description:
"Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='www.google.com'>documentation</a>.",
mode: "html",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
language: "py",

3
src/frontend/src/style/applies.css
View file

@ -757,6 +757,9 @@
.node-modal-button-box {
@apply flex-max-width flex-row-reverse bg-input px-4 pb-3
}
.link-color{
@apply text-foreground font-semibold
}
.node-modal-button {
@apply inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring sm:ml-3 sm:w-auto sm:text-sm
}

8
src/frontend/src/utils/utils.ts
View file

@ -397,9 +397,11 @@ export function getWidgetCode(flow: FlowType, tabsState?: TabsState): string {
const flowName = flow.name;
const inputs = buildInputs(tabsState, flow.id);
return `<!-- Insert this code anywhere in your <body> tag. To use with react, check our docs. -->
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
return `<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
<!-- chat_inputs: Stringified JSON with all the input keys and its values. The key that is defined
as chat_input_field will be overwritten by the chat message.
chat_input_field: Input key that you want the chat to send the user message with. -->
<langflow-chat
window_title="${flowName}"
flow_id="${flowId}"