Skip to content

Commit

Permalink
use examples link instead of help, add doublechecking API step, add o…
Browse files Browse the repository at this point in the history 
…ptional parameters card, fix details for UI
  • Loading branch information
@DoraDong-2023
DoraDong-2023 committed Dec 23, 2023
1 parent 35da76f commit 4da2eef
Show file tree
Hide file tree
Showing 15 changed files with 7,321 additions and 3,116 deletions.
106 changes: 78 additions & 28 deletions chatbot_ui_biomania/components/Chat/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { ChatLoader } from './ChatLoader';
import { LibCardSelect } from './LibCardSelect';
import { SystemPrompt } from './SystemPrompt';
import { MemoizedChatMessage } from './MemoizedChatMessage';
import { ToolUsage } from '@/types/chat';
interface Props {
stopConversationRef: MutableRefObject<boolean>;
}
Expand Down Expand Up @@ -56,10 +57,63 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const chatContainerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);

const toolStart: ToolUsage = {
type: "tool",
block_id: "tool-1",
occurence: 1,
Parameters: "",
status: 0,
api_name: "",
api_description: "",
api_calling: "",
task: "",
task_title: "",
composite_code: "",
ongoing: false,
depth: 0,
children: [],
parent: null
};
const toolEnd: ToolUsage = {
type: "tool",
block_id: "tool-1",
occurence: 1,
Parameters: "",
status: 0,
api_name: "",
api_description: "",
api_calling: "",
task: "",
task_title: "",
composite_code: "",
ongoing: false,
depth: 0,
children: [],
parent: null
};
const agentAction: ToolUsage = {
type: "tool",
block_id: "log-1",
occurence: 1,
Parameters: "",
status: 0,
api_name: "",
api_description: "",
api_calling: "",
task: "[Would you like to see some examples to learn how to interact with the bot?](https://github.com/batmen-lab/BioMANIA/tree/35da76f7d5cd40b99980654e84000e25ff167cb2/examples)",
task_title: "Welcome to BioMANIA! How can I help?",
composite_code: "",
ongoing: false,
depth: 0,
children: [],
parent: null
};

const [welcomeMessage] = useState<Message>({
role: 'assistant',
content: 'Welcome to BioMANIA! How can I help?',
tools: [],
content: '',
tools: [toolStart, toolEnd, agentAction],
recommendations: [],
files: [],
session_id: selectedConversation?.id || 'default-session-id'
Expand Down Expand Up @@ -95,8 +149,8 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
? [
{
role: 'assistant',
content: 'Welcome to BioMANIA! How can I help?',
tools: [],
content: '',
tools: [toolStart, toolEnd, agentAction],
recommendations: [],
files: [],
session_id: selectedConversation.id
Expand Down Expand Up @@ -395,55 +449,51 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
function displayDefaultScreen(selectedConversation: Conversation) {
return (
<>
<div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px]">
<div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-5 md:pt-12 sm:max-w-[600px] bg-white">
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
BioMANIA UI
</div>
{
// models.length > 0 &&
(
<div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600">
<LibCardSelect />
{/*<SystemPrompt
conversation={selectedConversation}
prompts={[]}
// prompts}
onChangePrompt={(prompt) =>
handleUpdateConversation(selectedConversation, {
key: 'prompt',
value: prompt,
})
}
/>*/}
</div>
)}
<div className="flex h-full flex-col space-y-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-600 overflow-auto bg-white">
<LibCardSelect />
<div className="welcome-message mt-4 bg-white">
<MemoizedChatMessage
key="welcomeMessage"
message={welcomeMessage}
messageIndex={0}
onEdit={(editedMessage) => {
setCurrentMessage(editedMessage);
handleSend(editedMessage, selectedConversation?.messages.length);
}}
/>
</div>
</div>
</div>
</>
)
}
);
}
const reportRef = useRef(null);
return (
<div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
{
(
<>
<div
className="max-h-full overflow-x-hidden"
style={{ height: '85vh', overflowX: 'hidden' }}
ref={chatContainerRef}
onScroll={handleScroll}
>
{selectedConversation?.messages.length === 0 ? (
<>
{displayDefaultScreen(selectedConversation)}
<MemoizedChatMessage
{/*<MemoizedChatMessage
key="welcomeMessage"
message={welcomeMessage}
messageIndex={0}
onEdit={(editedMessage) => {
setCurrentMessage(editedMessage);
handleSend(editedMessage, selectedConversation?.messages.length);
}}
/>
/>*/}
</>
) : (
<>
Expand Down
21 changes: 18 additions & 3 deletions chatbot_ui_biomania/components/Chat/ChatInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,11 +129,26 @@ export const ChatInput = ({
textareaRef.current.blur();
}
};
const handleStopConversation = () => {
const handleStopConversation = async () => {
stopConversationRef.current = true;
setTimeout(() => {
try {
const response = await fetch('/api/stop_generation', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ sessionId: selectedConversation?.id })
});
if (!response.ok) {
throw new Error('Failed to send stop signal to the server.');
}
console.log("Stop signal sent successfully.");
} catch (error) {
console.error("Error sending stop signal:", error);
} finally {
stopConversationRef.current = false;
}, 1000);
homeDispatch({ field: 'messageIsStreaming', value: false });
}
};
const isMobile = () => {
const userAgent =
Expand Down
40 changes: 17 additions & 23 deletions chatbot_ui_biomania/components/Chat/LibCardSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const libImages: { [key: string]: string } = {
'sonata': '/apps/SONATA.webp',
'MIOSTONE': '/apps/MIOSTONE.webp',
'ehrapy': '/apps/ehrapy.webp',
//'custom': '/apps/customize.webp',
'custom': '/apps/customize.webp',
};

export const LibCardSelect = () => {
Expand Down Expand Up @@ -52,7 +52,7 @@ export const LibCardSelect = () => {
{ id: 'sonata', name: 'sonata' },
{ id: 'MIOSTONE', name: 'MIOSTONE' },
{ id: 'ehrapy', name: 'ehrapy' },
//{ id: 'custom', name: 'custom' },
{ id: 'custom', name: 'custom' },
];

const existingLibIds = methods.map(lib => lib.id);
Expand Down Expand Up @@ -121,56 +121,50 @@ export const LibCardSelect = () => {
{showCustomInput && (
<div className="custom-input-container">
<div>
<label>GitHub URL: </label>
<label style={{ color: 'black' }}>LIB Name: </label>
<input
type="text"
placeholder="GitHub URL"
placeholder="(Required) e.g. biopython"
style={{ color: 'black' }}
onChange={(e) => setCustomGitHubURL(e.target.value)}
onChange={(e) => setCustomLibName(e.target.value)}
/>
</div>
<div>
<label>ReadTheDocs URL: </label>
<label style={{ color: 'black' }}>LIB ALIAS: </label>
<input
type="text"
placeholder="ReadTheDocs URL"
placeholder="(Required) e.g. Bio"
style={{ color: 'black' }}
onChange={(e) => setCustomReadTheDocsURL(e.target.value)}
onChange={(e) => setcustomLIBALIAS(e.target.value)}
/>
</div>
<div>
<label>Library Name: </label>
<label style={{ color: 'black' }}>API HTML: </label>
<input
type="text"
placeholder="Library Name"
placeholder="(Optional) e.g. biopython.org/docs/latest/api"
style={{ color: 'black' }}
onChange={(e) => setCustomLibName(e.target.value)}
onChange={(e) => setcustomAPIHTML(e.target.value)}
/>
</div>
<div>
<label>API HTML: </label>
<label style={{ color: 'black' }}>GitHub URL: </label>
<input
type="text"
placeholder="API HTML"
placeholder="(Optional) e.g. https://github.com/biopython/biopython"
style={{ color: 'black' }}
onChange={(e) => setcustomAPIHTML(e.target.value)}
onChange={(e) => setCustomGitHubURL(e.target.value)}
/>
</div>
<div>
<label>LIB ALIAS: </label>
<label style={{ color: 'black' }}>ReadTheDocs URL: </label>
<input
type="text"
placeholder="LIB ALIAS"
placeholder="(Optional) e.g. https://biopython.org/docs/latest/api"
style={{ color: 'black' }}
onChange={(e) => setcustomLIBALIAS(e.target.value)}
onChange={(e) => setCustomReadTheDocsURL(e.target.value)}
/>
</div>
<div>
<label>LIB ALIAS: </label>
<span style={{ color: 'white', border: '1px solid gray', padding: '0px 0px' }}>
{}
</span>
</div>
</div>
)}

Expand Down
Loading

0 comments on commit 4da2eef

Please sign in to comment.