mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-09-21 03:40:52 +02:00
auto open param and default greeting
This commit is contained in:
parent
2f0942afac
commit
1bdc4b9975
@ -4,12 +4,17 @@ import useOpenChat from "@/hooks/useOpen";
|
|||||||
import Head from "@/components/Head";
|
import Head from "@/components/Head";
|
||||||
import OpenButton from "@/components/OpenButton";
|
import OpenButton from "@/components/OpenButton";
|
||||||
import ChatWindow from "./components/ChatWindow";
|
import ChatWindow from "./components/ChatWindow";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const { isChatOpen, toggleOpenChat } = useOpenChat();
|
const { isChatOpen, toggleOpenChat } = useOpenChat();
|
||||||
const embedSettings = useGetScriptAttributes();
|
const embedSettings = useGetScriptAttributes();
|
||||||
const sessionId = useSessionId();
|
const sessionId = useSessionId();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
toggleOpenChat(embedSettings.openOnLoad === 'on')
|
||||||
|
}, [embedSettings.loaded]);
|
||||||
|
|
||||||
if (!embedSettings.loaded) return null;
|
if (!embedSettings.loaded) return null;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -20,8 +25,7 @@ export default function App() {
|
|||||||
width: isChatOpen ? 320 : "auto",
|
width: isChatOpen ? 320 : "auto",
|
||||||
height: isChatOpen ? "93vh" : "auto",
|
height: isChatOpen ? "93vh" : "auto",
|
||||||
}}
|
}}
|
||||||
className={`transition-all duration-300 ease-in-out ${
|
className={`transition-all duration-300 ease-in-out ${isChatOpen
|
||||||
isChatOpen
|
|
||||||
? "max-w-md p-4 bg-white rounded-lg border shadow-lg w-72"
|
? "max-w-md p-4 bg-white rounded-lg border shadow-lg w-72"
|
||||||
: "w-16 h-16 rounded-full"
|
: "w-16 h-16 rounded-full"
|
||||||
}`}
|
}`}
|
||||||
|
@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
|
|||||||
import { ArrowDown } from "@phosphor-icons/react";
|
import { ArrowDown } from "@phosphor-icons/react";
|
||||||
import debounce from "lodash.debounce";
|
import debounce from "lodash.debounce";
|
||||||
|
|
||||||
export default function ChatHistory({ history = [] }) {
|
export default function ChatHistory({ settings = {}, history = [] }) {
|
||||||
const replyRef = useRef(null);
|
const replyRef = useRef(null);
|
||||||
const [isAtBottom, setIsAtBottom] = useState(true);
|
const [isAtBottom, setIsAtBottom] = useState(true);
|
||||||
const chatHistoryRef = useRef(null);
|
const chatHistoryRef = useRef(null);
|
||||||
@ -46,10 +46,11 @@ export default function ChatHistory({ history = [] }) {
|
|||||||
|
|
||||||
if (history.length === 0) {
|
if (history.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full md:mt-0 pb-48 w-full justify-end items-center">
|
<div style={{ height: "85vh", paddingBottom: 100, paddingTop: 5 }}
|
||||||
<div className="flex flex-col items-start">
|
className="bg-gray-100 rounded-lg px-2 h-full mt-2 gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll">
|
||||||
<p className="text-white/60 text-lg font-base py-4">
|
<div className="flex h-full flex-col items-center justify-center">
|
||||||
send a chat to get started!
|
<p className="text-slate-400 text-sm font-base py-4 text-center">
|
||||||
|
{settings?.greeting ?? 'Send a chat to get started!'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +59,7 @@ export default function ChatHistory({ history = [] }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ height: "85vh", paddingBottom: 100 }}
|
style={{ height: "85vh", paddingBottom: 100, paddingTop: 5 }}
|
||||||
className="bg-gray-100 rounded-lg px-2 h-full mt-2 gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll"
|
className="bg-gray-100 rounded-lg px-2 h-full mt-2 gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll"
|
||||||
id="chat-history"
|
id="chat-history"
|
||||||
ref={chatHistoryRef}
|
ref={chatHistoryRef}
|
||||||
|
@ -2,6 +2,7 @@ import { CircleNotch, PaperPlaneRight } from "@phosphor-icons/react";
|
|||||||
import React, { useState, useRef } from "react";
|
import React, { useState, useRef } from "react";
|
||||||
|
|
||||||
export default function PromptInput({
|
export default function PromptInput({
|
||||||
|
setttings,
|
||||||
message,
|
message,
|
||||||
submit,
|
submit,
|
||||||
onChange,
|
onChange,
|
||||||
|
@ -69,8 +69,9 @@ export default function ChatContainer({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ChatHistory history={chatHistory} />
|
<ChatHistory settings={settings} history={chatHistory} />
|
||||||
<PromptInput
|
<PromptInput
|
||||||
|
settings={settings}
|
||||||
message={message}
|
message={message}
|
||||||
submit={handleSubmit}
|
submit={handleSubmit}
|
||||||
onChange={handleMessageChange}
|
onChange={handleMessageChange}
|
||||||
|
@ -5,8 +5,8 @@ export default function SessionId() {
|
|||||||
if (!sessionId) return null;
|
if (!sessionId) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="text-xs text-gray-500 w-full text-center">
|
<div className="text-xs text-gray-300 w-full text-center">
|
||||||
ID: {sessionId}
|
{sessionId}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -13,6 +13,10 @@ const DEFAULT_SETTINGS = {
|
|||||||
// style parameters
|
// style parameters
|
||||||
chatIcon: "plus",
|
chatIcon: "plus",
|
||||||
brandImageUrl: null, // will be forced into 100x50px container
|
brandImageUrl: null, // will be forced into 100x50px container
|
||||||
|
greeting: null, // empty chat window greeting.
|
||||||
|
|
||||||
|
// behaviors
|
||||||
|
openOnLoad: 'off', // or "on"
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function useGetScriptAttributes() {
|
export default function useGetScriptAttributes() {
|
||||||
|
Loading…
Reference in New Issue
Block a user