TiddlyWiki5/plugins/tiddlywiki/ai-tools/view-templates/conversation.tid

title: $:/plugins/tiddlywiki/ai-tools/view-templates/conversation
tags: $:/tags/ViewTemplate
list-after: $:/core/ui/ViewTemplate/body

<!--
-->
\function statusTitle()
[<currentTiddler>addprefix[$:/temp/ai-tools/status/]]
\end statusTitle

<!--
Procedure to display a message from an AI conversation. Current tiddler is the conversation tiddler
-->
\procedure ai-message(tiddler,field,role,makeLink:"yes")
<$qualify
	name="state"
	title={{{ [[$:/state/ai-message-state/]addsuffix<tiddler>] }}}
>
	<$let
		editStateTiddler={{{ [<state>addsuffix[-edit-state]] }}}
		editState={{{ [<editStateTiddler>get[text]else[view]]  }}}
	>
		<div class={{{ ai-message [<role>addprefix[ai-message-role-]] +[join[ ]] }}}>
			<div class="ai-message-toolbar">
				<div class="ai-message-toolbar-left">
					<$genesis $type={{{ [<makeLink>match[yes]then[$link]else[span]] }}} to=<<tiddler>>>
						<$text text=<<role>>/>
					</$genesis>
				</div>
				<div class="ai-message-toolbar-left">
					<%if [<editState>!match[edit]] %>
						<$button class="ai-message-toolbar-button">
							<$action-setfield $tiddler=<<editStateTiddler>> text="edit"/>
							edit
						</$button>
					<%endif%>
					<%if [<editState>!match[view]] %>
						<$button class="ai-message-toolbar-button">
							<$action-setfield $tiddler=<<editStateTiddler>> text="view"/>
							view
						</$button>
					<%endif%>
					<$button class="ai-message-toolbar-button">
						<$action-sendmessage $message="tm-copy-to-clipboard" $param={{{ [<tiddler>get<field>else[]] }}}/>
						copy
					</$button>
					<$button class="ai-message-toolbar-button">
						<$action-deletetiddler $tiddler=<<tiddler>>/>
						delete
					</$button>
				</div>
			</div>
			<div class="ai-message-body">
				<%if [<editState>match[view]] %>
					<$transclude $tiddler=<<tiddler>> $field=<<field>> $mode="block"/>
				<%else%>
					<$edit-text tiddler=<<tiddler>> field=<<field>> tag="textarea" class="tc-edit-texteditor"/>
				<%endif%>
				<%if [<tiddler>get[image]else[]!match[]] %>
					<$image source={{{ [<tiddler>get[image]] }}}/>
				<%endif%>
			</div>
		</div>
	</$let>
</$qualify>
\end ai-message

<!--
Action procedure to get the next response from the LLM
-->
\procedure action-get-response()
<$let
	resultTitlePrefix={{{ [<currentTiddler>addsuffix[ - Prompt]] }}}
	resultTags={{{ [<currentTiddler>format:titlelist[]] }}}
>
	<$action-createtiddler
		$basetitle=<<resultTitlePrefix>>
		tags=<<resultTags>>
		type="text/markdown"
		role="user"
		text={{!!current-response-text}}
		image={{!!current-response-image}}
	>
		<$action-deletefield $tiddler=<<currentTiddler>> $field="current-response-text"/>
		<$action-deletefield $tiddler=<<currentTiddler>> $field="current-response-image"/>
		<$transclude
			$variable="get-llm-completion"
			conversationTitle=<<currentTiddler>>
			completionServer={{!!completion-server}}
			resultTitlePrefix=<<resultTitlePrefix>>
			resultTags=<<resultTags>>
			statusTitle=<<statusTitle>>
		/>
	</$action-createtiddler>
</$let>
\end action-get-response

<%if [<currentTiddler>tag[$:/tags/AI/Conversation]] %>

Server: <$select tiddler=<<currentTiddler>> field="completion-server" default=<<default-llm-completion-server>>>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/AI/CompletionServer]sort[caption]]">
<option value=<<currentTiddler>>><$view field='caption'/></option>
</$list>
</$select>

<div class="ai-conversation">
	<$transclude
		$variable="ai-message"
		tiddler=<<currentTiddler>>
		field="system-prompt"
		role="system"
		makeLink="no"
	/>
	<$list filter="[all[shadows+tiddlers]tag<currentTiddler>!is[draft]sort[created]]" variable="message" storyview="pop">
		<$transclude
			$variable="ai-message"
			tiddler=<<message>>
			field="text"
			role={{{ [<message>get[role]] }}}
		/>
	</$list>
	<%if [<statusTitle>get[text]else[complete]match[pending]] %>
		<div class="ai-request-status">
			<div class="ai-request-spinner"></div>
		</div>
	<%endif%>
	<div class="ai-user-prompt">
		<div class="ai-user-prompt-text">
			<$edit-text tiddler=<<currentTiddler>> field="current-response-text" tag="textarea" class="tc-edit-texteditor"/>
			<$button
				class="ai-user-prompt-send"
				actions=<<action-get-response>>
				disabled={{{ [<statusTitle>get[text]else[complete]match[pending]then[yes]] [<currentTiddler>get[current-response-text]else[]match[]then[yes]] ~[[no]] }}}
			>
				Send
			</$button>
		</div>
		<div class="ai-user-prompt-image">
			<div class="tc-drop-down-wrapper">
				<$let state=<<qualify "$:/state/ai-user-prompt-image-dropdown-state/">>>
					<$button popup=<<state>> class="tc-btn-invisible tc-btn-dropdown">Choose an image {{$:/core/images/down-arrow}}</$button>
					<$link to={{!!current-response-image}}>
						<$text text={{!!current-response-image}}/>
					</$link>
					<$reveal state=<<state>> type="popup" position="belowleft" text="" default="" class="tc-popup-keep">
						<div class="tc-drop-down" style="text-align:center;">
							<$transclude
								$variable="image-picker"
								filter="[all[shadows+tiddlers]is[image]is[binary]!has[_canonical_uri]] -[type[application/pdf]] +[!has[draft.of]sort[title]]"
								actions="""
									<$action-setfield
										$tiddler=<<currentTiddler>>
										current-response-image=<<imageTitle>>
									/>
									<$action-deletetiddler $tiddler=<<state>>/>
								"""
							/>
						</div>
					</$reveal>
				</$let>
				<$image source={{!!current-response-image}}/>
			</div>
		</div>
	</div>
</div>


<%endif%>