const conversations_list_item = `
	<div id="conversations-list-item-{CONVERSATION_ID}" class="conversations-list-btn" onclick="goToConversation(event, '{CONVERSATION_ID}')">
		<i class="fa-solid fa-message"></i>
		<span id="conversations-list-item-{CONVERSATION_ID}-name">{CONVERSATION_TITLE}</span>
		<div class="conversations-list-item-manage-container" id="conversations-list-item-manage-container-{CONVERSATION_ID}">
			<div class="conversations-list-item-manage-btn" onclick="startDeletingConversation(event, '{CONVERSATION_ID}')">
				<i class="fa-solid fa-trash"></i>
			</div>
		</div>
	</div>
`;

const conversations_list_item_active = `
<div id="conversations-list-item-{CONVERSATION_ID}" class="conversations-list-btn conversations-list-btn-active" onclick="goToConversation(event, '{CONVERSATION_ID}')">
	<i class="fa-solid fa-message"></i>
	<span id="conversations-list-item-{CONVERSATION_ID}-name">{CONVERSATION_TITLE}</span>
	<div class="conversations-list-item-manage-container" id="conversations-list-item-manage-container-{CONVERSATION_ID}">
		<div class="conversations-list-item-manage-btn" onclick="startDeletingConversation(event, '{CONVERSATION_ID}')">
			<i class="fa-solid fa-trash"></i>
		</div>
	</div>
</div>
`;

const conversations_list_item_manage_options_html = `
	<div class="conversations-list-item-manage-btn" onclick="startDeletingConversation(event, '{CONVERSATION_ID}')">
		<i class="fa-solid fa-trash"></i>
	</div>
`;

const conversations_list_item_manage_delete_options_html = `
	<div class="conversations-list-item-manage-btn conversations-list-item-delete-btn" onclick="deleteConversation(event, '{CONVERSATION_ID}')">
		<i class="fa-solid fa-trash"></i>
	</div>
	<div class="conversations-list-item-manage-btn" onclick="stopDeletingConversation(event, '{CONVERSATION_ID}')">
		<i class="fa-solid fa-rotate-left"></i>
	</div>
`;

const chat_new_conversation_html = `
	<div class="chat-container">
		<div class="chat-header">
			<div class="assistants-list-container">
				<div class="assistant-name-container" id="assistant-name-container" onclick="toggleAssistantsDropdown()">
					<div class="assistant-name assistant-name-placeholder" id="assistant-name">Select an Assistant</div>
				</div>
				<div class="assistants-list assistants-list-hidden" id="assistants-list"></div>
			</div>
			<div class="tov-list-container">
				<div class="tov-name-container" id="tov-name-container" onclick="toggleTOVsDropdown()">
					<div class="tov-name tov-name-placeholder" id="tov-name">Select a Tone of Voice</div>
				</div>
				<div class="tov-list tov-list-hidden" id="tov-list"></div>
			</div>
		</div>
		<div id="chat" class="chat"></div>
		<div class="message-input-container">
			<textarea id="message-input" placeholder="Type a message here" rows="1"></textarea>
			<button onclick="sendMessage()">
				<i class="fa-solid fa-paper-plane"></i>
			</button>
		</div>

	</div>
`;

const assistant_list_item = `
	<div class="assistants-list-item" onclick="selectAssistant('{ASSISTANT_KEY}')">{ASSISTANT_NAME}</div>
`;

const tov_list_item = `
	<div class="tov-list-item" onclick="selectTOV('{TOV_ID}')">{TOV_NAME}</div>
`;

const chat_message_user = `
	<div class="chat-message chat-message-user">
		<div class="chat-message-role">
			<i class="fa-solid fa-user"></i>
		</div>
		<div class="chat-message-content">{CONTENT}</div>
	</div>
`;

const chat_message_user_new = `
	<div class="chat-message chat-message-user chat-message-appear">
		<div class="chat-message-role">
			<i class="fa-solid fa-user"></i>
		</div>
		<div class="chat-message-content">{CONTENT}</div>
	</div>
`;

const chat_message_assistant = `
	<div class="chat-message chat-message-assistant">
		<div class="chat-message-role">
			<i class="fa-solid fa-robot"></i>
		</div>
		<div class="chat-message-content">{CONTENT}</div>
	</div>
`;

const chat_message_assistant_new = `
	<div class="chat-message chat-message-assistant chat-message-appear">
		<div class="chat-message-role">
			<i class="fa-solid fa-robot"></i>
		</div>
		<div class="chat-message-content">{CONTENT}</div>
	</div>
`;

const chat_message_assistant_loading_dots = `
	<div class="chat-message chat-message-assistant chat-message-appear chat-message-loading-dots">
		<div class="chat-message-role">
			<i class="fa-solid fa-robot"></i>
		</div>
		<div class="chat-message-content">
			<div class="chat-message-loading-dots-wrapper">
				<div class="chat-message-loading-dot"></div>
				<div class="chat-message-loading-dot"></div>
				<div class="chat-message-loading-dot"></div>
			</div>
		</div>
	</div>
`;

const loading_circle = `
	<div class="loading-circle-container">
		<div class='loading-circle'></div>
	</div>
`;