From c285e37678b402f6cad9ed983e676c1ff4946d71 Mon Sep 17 00:00:00 2001
From: Ralph Soika <ralph.soika@imixs.com>
Date: Mon, 14 Oct 2024 15:39:28 +0200
Subject: [PATCH] feature completed

Issue #610
---
 .../resources/bundle/messages_de.properties   |  3 +
 .../resources/bundle/messages_en.properties   |  3 +
 .../webapp/layout/css/office-theme-ai.css     | 59 +++++++++++++++
 .../webapp/pages/workitems/workitem_ai.xhtml  | 40 ++++++++---
 .../workflow/office/forms/AIController.java   | 72 +++++++++++++------
 .../office/forms/ChildItemController.java     | 69 ++++++++++--------
 6 files changed, 185 insertions(+), 61 deletions(-)

diff --git a/imixs-office-workflow-app/src/main/resources/bundle/messages_de.properties b/imixs-office-workflow-app/src/main/resources/bundle/messages_de.properties
index 0e6dbe79..3fd92f0e 100644
--- a/imixs-office-workflow-app/src/main/resources/bundle/messages_de.properties
+++ b/imixs-office-workflow-app/src/main/resources/bundle/messages_de.properties
@@ -150,6 +150,9 @@ type=Typ
 summary=Zusammenfassung
 ai=KI
 ai.prompt=Wie kann ich Ihnen helfen?
+ai.question=Frage
+ai.answer=Antwort
+ai.ask_question=Frage stellen...
 
 ####################
 # Month
diff --git a/imixs-office-workflow-app/src/main/resources/bundle/messages_en.properties b/imixs-office-workflow-app/src/main/resources/bundle/messages_en.properties
index 36a32570..8c91437d 100644
--- a/imixs-office-workflow-app/src/main/resources/bundle/messages_en.properties
+++ b/imixs-office-workflow-app/src/main/resources/bundle/messages_en.properties
@@ -150,6 +150,9 @@ type=Type
 summary=Summary
 ai=AI
 ai.prompt=How can I help you?
+ai.question=Question
+ai.answer=Answer
+ai.ask_question=Ask question...
 
 ####################
 # Month
diff --git a/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-ai.css b/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-ai.css
index b7507d50..2ad40293 100644
--- a/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-ai.css
+++ b/imixs-office-workflow-app/src/main/webapp/layout/css/office-theme-ai.css
@@ -41,7 +41,66 @@
 }
 
 
+.imixs-ai-chat-history {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.imixs-ai-chat-entry {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid #e0e0e0;
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.imixs-ai-chat-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #f5f5f5;
+	padding: 10px 15px;
+	font-size: 0.9em;
+	color: #555;
+}
+
+.imixs-ai-chat-content {
+	display: flex;
+	flex-direction: column;
+	padding: 15px;
+	gap: 10px;
+}
+
+.imixs-ai-question,
+.imixs-ai-answer {
+	display: flex;
+	flex-direction: column;
+}
+
+.imixs-ai-label {
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+
+.imixs-ai-message {
+	background-color: #fff;
+	border-radius: 4px;
+	padding: 10px;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow-x: auto;
+}
+
+.user-question .imixs-ai-message {
+	background-color: #e6f3ff;
+}
 
+.imixs-ai-answer .message {
+	background-color: #f0f0f0;
+}
 
 .imixs-ai-loader {
 	border: 6px solid #f3f3f3;
diff --git a/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem_ai.xhtml b/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem_ai.xhtml
index b2e02d17..8405d059 100644
--- a/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem_ai.xhtml
+++ b/imixs-office-workflow-app/src/main/webapp/pages/workitems/workitem_ai.xhtml
@@ -6,12 +6,11 @@
 	<!-- Integration of Imixs-AI		
 	 -->
 	<dl>
-
 		<dd>
 			<h:inputTextarea required="false" value="#{workflowController.workitem.item['ai.chat.prompt']}"
 				a:placeholder="#{message['ai.prompt']}" id="promptInput" style="height: 5em; width: 95%">
 			</h:inputTextarea>
-			<h:commandButton value="#{message.send}" actionListener="#{aiController.sendAsync}">
+			<h:commandButton value="#{message['ai.ask_question']}" actionListener="#{aiController.sendAsync}">
 				<f:ajax execute="promptInput" render="@none" onevent="handleSendEvent" />
 			</h:commandButton>
 		</dd>
@@ -25,34 +24,53 @@
 	</h:panelGroup>
 
 	<!-- Imixs AI Chat history-->
-	<h:panelGroup layout="block" id="imixs_ai_chatlist" style="margin-bottom:10px;">
-		<ui:repeat var="aiResultEntry" value="#{aiController.aiChatHistory}">
-			#{aiResultEntry}
-			<hr />
+
+	<hr />
+	<h:panelGroup layout="block" id="imixs_ai_chatlist" styleClass="imixs-ai-chat-history">
+		<ui:repeat var="aiChatHistoryEntry" value="#{aiController.chatHistory}">
+			<div class="imixs-ai-chat-entry">
+				<div class="imixs-ai-chat-header">
+					<h:outputText value="#{aiChatHistoryEntry.item['date']}">
+						<f:convertDateTime pattern="#{message.dateTimePatternLong}" timeZone="#{message.timeZone}"
+							type="date" />
+					</h:outputText>
+					<span>#{userController.getUserName(aiChatHistoryEntry.item['user'])}</span>
+				</div>
+				<div class="imixs-ai-chat-content">
+					<div class="imixs-ai-question">
+						<span class="imixs-ai-label">#{message['ai.question']}:</span>
+						<div class="imixs-ai-message">#{aiChatHistoryEntry.item['question']}</div>
+					</div>
+					<div class="imixs-ai-answer">
+						<span class="imixs-ai-label">#{message['ai.answer']}:</span>
+						<div class="imixs-ai-message">#{aiChatHistoryEntry.item['answer']}</div>
+					</div>
+				</div>
+			</div>
 		</ui:repeat>
 	</h:panelGroup>
 
 	<h:commandScript name="refreshAILifeResult" render="aiResultStream" onevent="handleRefreshEvent" />
-	<h:commandScript name="refreshAIChatHistory" render="imixs_ai_chatlist" />
+	<h:commandScript name="refreshAIChatHistory" render="imixs_ai_chatlist promptInput" />
 	<script type="text/javascript">
 		/*<![CDATA[*/
 		var refreshInterval;
 		function handleSendEvent(data) {
 			if (data.status === "begin") {
-				console.log('streaming started....');
+				//console.log('streaming started....');
 				startRefreshing();
 			}
 		}
 		function handleRefreshEvent(data) {
 			if (data.status === 'success') {
-				console.log('handle refreshEvent: ' + data.responseText);
+				//console.log('handle refreshEvent: ' + data.responseText);
 				if (data.responseText && data.responseText.indexOf('imixs.ai.stream.completed') > -1) {
 					stopRefreshing();
 				}
 			}
 		}
 		function startRefreshing() {
-			console.log('Start Refreshing...');
+			//console.log('Start Refreshing...');
 			refreshInterval = setInterval(refreshAILifeResult, 100);
 			// show imixs_ai_life_stream
 			lifeStreamBlock = document.querySelector('[id$=":imixs_ai_life_stream"]');
@@ -62,7 +80,7 @@
 
 		}
 		function stopRefreshing() {
-			console.log('Stop Refreshing!');
+			//console.log('Stop Refreshing!');
 			clearInterval(refreshInterval);
 			refreshAIChatHistory();
 			// hide imixs_ai_life_stream
diff --git a/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/AIController.java b/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/AIController.java
index b089056f..0ea05a4e 100644
--- a/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/AIController.java
+++ b/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/AIController.java
@@ -47,6 +47,7 @@
 import org.imixs.workflow.exceptions.PluginException;
 import org.imixs.workflow.faces.data.WorkflowController;
 import org.imixs.workflow.faces.data.WorkflowEvent;
+import org.imixs.workflow.faces.util.LoginController;
 
 import jakarta.enterprise.context.ConversationScoped;
 import jakarta.enterprise.event.Observes;
@@ -74,12 +75,17 @@
 public class AIController implements Serializable {
 	public static final String ERROR_PROMPT_TEMPLATE = "ERROR_PROMPT_TEMPLATE";
 	public static final String ERROR_PROMPT_INFERENCE = "ERROR_PROMPT_INFERENCE";
+	public static final String AI_CHAT_HISTORY = "ai.chat.history";
+
+	public static final String AI_STREAM_EOS = "<!-- imixs.ai.stream.completed -->";
 
 	private static final long serialVersionUID = 1L;
 	private static Logger logger = Logger.getLogger(AIController.class.getName());
 
-	List<String> aiChatHistory;
+	List<ItemCollection> chatHistory;
 	String currentStreamResult = "";
+	String question = null;
+	String answer = null;
 
 	@Inject
 	protected WorkflowController workflowController;
@@ -90,28 +96,30 @@ public class AIController implements Serializable {
 	@Inject
 	protected UserController userController;
 
+	@Inject
+	protected LoginController loginController;
+
 	@Inject
 	OpenAIAPIService openAIAPIService;
 
 	private CompletableFuture<Void> streamingFuture;
 
 	/**
-	 * This helper method is called during the WorkflowEvent.WORKITEM_CHANGED to
-	 * update the chronicle view for the current workitem.
+	 * Returns the chat history in reverse order. Used by the frontend component
+	 * 
+	 * @return
 	 */
-	public void init() {
-		aiChatHistory = new ArrayList<String>();
-	}
-
-	public List<String> getAiChatHistory() {
-		return aiChatHistory;
+	public List<ItemCollection> getChatHistory() {
+		List<ItemCollection> reversedList = new ArrayList<>(chatHistory);
+		Collections.reverse(reversedList);
+		return reversedList;
 	}
 
 	/**
 	 * WorkflowEvent listener
 	 * 
-	 * If a new WorkItem was created or changed, the chronicle view will be
-	 * initialized.
+	 * If a new WorkItem was created or changed, the imixs.ai.chat.history view will
+	 * be initialized or updated.
 	 * 
 	 * @param workflowEvent
 	 */
@@ -121,9 +129,10 @@ public void onWorkflowEvent(@Observes WorkflowEvent workflowEvent) {
 		}
 		if (WorkflowEvent.WORKITEM_CREATED == workflowEvent.getEventType()
 				|| WorkflowEvent.WORKITEM_CHANGED == workflowEvent.getEventType()) {
-			// reset data...
-			init();
+			// read current imixs.ai.chat.history...
+			chatHistory = ChildItemController.explodeChildList(workflowController.getWorkitem(), AI_CHAT_HISTORY);
 		}
+
 	}
 
 	/**
@@ -134,12 +143,11 @@ public void onWorkflowEvent(@Observes WorkflowEvent workflowEvent) {
 	 */
 	public void sendAsync() throws PluginException {
 		ItemCollection workitem = workflowController.getWorkitem();
-		String input = workitem.getItemValueString("ai.chat.prompt");
-		logger.info("prompt...:" + input);
-		String prompt = buildContextPrompt(input);
+		question = workitem.getItemValueString("ai.chat.prompt");
+		logger.fine("question: " + question);
+		String prompt = buildContextPrompt(question);
 		JsonObject jsonPrompt = openAIAPIService.buildJsonPromptObject(prompt, true, null);
 
-		aiChatHistory.add("Question: " + input);
 		// starting async http request...
 		streamingFuture = CompletableFuture.runAsync(() -> {
 			try {
@@ -162,7 +170,7 @@ private void streamPromptCompletion(JsonObject jsonPromptObject) throws PluginEx
 
 			// Write the JSON object to the output stream
 			String jsonString = jsonPromptObject.toString();
-			logger.info("JSON Object=" + jsonString);
+			logger.fine("JSON Object=" + jsonString);
 
 			try (OutputStream os = conn.getOutputStream()) {
 				byte[] input = jsonString.getBytes(StandardCharsets.UTF_8);
@@ -184,12 +192,13 @@ private void streamPromptCompletion(JsonObject jsonPromptObject) throws PluginEx
 							String content = responseObject.getString("content");
 							boolean stop = responseObject.getBoolean("stop", false);
 							currentStreamResult = currentStreamResult + content;
-							logger.info("FullResponse: " + currentStreamResult);
+							logger.fine("FullResponse: " + currentStreamResult);
 							if (stop) {
-								logger.info("request completed - adding answer....");
-								aiChatHistory.add("Answer: " + currentStreamResult);
+								logger.fine("request completed - adding answer....");
+								answer = currentStreamResult.trim();
+
 								// reset stream result!
-								currentStreamResult = "<!-- imixs.ai.stream.completed -->";
+								currentStreamResult = AI_STREAM_EOS;
 								break;
 							}
 						}
@@ -212,7 +221,26 @@ public boolean isStreamingComplete() {
 	}
 
 	public String getStreamResult() {
+		if (AI_STREAM_EOS.equals(currentStreamResult)) {
+			updateChatHistory();
+		}
 		return currentStreamResult;
+
+	}
+
+	/**
+	 * Helper method to update the ai.chat.history
+	 */
+	private void updateChatHistory() {
+		ItemCollection chatEntry = new ItemCollection();
+		chatEntry.setItemValue("question", question);
+		chatEntry.setItemValue("answer", answer);
+		chatEntry.setItemValue("date", new Date());
+		chatEntry.setItemValue("user", loginController.getUserPrincipal());
+		chatHistory.add(chatEntry);
+		// persist new imixs.ai.chat.history
+		ChildItemController.implodeChildList(workflowController.getWorkitem(), chatHistory, AI_CHAT_HISTORY);
+		workflowController.getWorkitem().removeItem("ai.chat.prompt");
 	}
 
 	/**
diff --git a/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/ChildItemController.java b/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/ChildItemController.java
index fc9146ec..d8d81ed6 100644
--- a/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/ChildItemController.java
+++ b/imixs-office-workflow-util/src/main/java/org/imixs/workflow/office/forms/ChildItemController.java
@@ -29,14 +29,14 @@
 import java.util.Map;
 import java.util.logging.Logger;
 
-import jakarta.enterprise.context.ConversationScoped;
-import jakarta.enterprise.event.Observes;
-import jakarta.inject.Named;
-
 import org.imixs.workflow.ItemCollection;
 import org.imixs.workflow.exceptions.AccessDeniedException;
 import org.imixs.workflow.faces.data.WorkflowEvent;
 
+import jakarta.enterprise.context.ConversationScoped;
+import jakarta.enterprise.event.Observes;
+import jakarta.inject.Named;
+
 /**
  * The CDI ChildItemController provides methods to display and edit sub items in
  * a sub-form. The controller provides methods to add or remove a childItem.
@@ -104,8 +104,8 @@ public void onWorkflowEvent(@Observes WorkflowEvent workflowEvent) throws Access
 		}
 
 		// before the workitem is saved we update the field txtOrderItems
-		if (WorkflowEvent.WORKITEM_BEFORE_PROCESS == eventType ) {
-			implodeChildList(workitem);
+		if (WorkflowEvent.WORKITEM_BEFORE_PROCESS == eventType) {
+			implodeChildList(workitem, childItems);
 		}
 
 		if (WorkflowEvent.WORKITEM_AFTER_PROCESS == eventType) {
@@ -148,43 +148,56 @@ public double convertDouble(String aValue) {
 	}
 
 	/**
-	 * Convert the List of ItemCollections back into a List of Map elements
-	 * 
-	 * @param workitem
+	 * converts the Map List of a workitem into a List of ItemCollectons
 	 */
-	@SuppressWarnings({ "rawtypes" })
-	protected void implodeChildList(ItemCollection workitem) {
-		List<Map> mapOrderItems = new ArrayList<Map>();
-		// convert the child ItemCollection elements into a List of Map
-		if (childItems != null) {
-			logger.fine("Convert child items into Map...");
-			// iterate over all order items..
-			for (ItemCollection orderItem : childItems) {
-				mapOrderItems.add(orderItem.getAllItems());
-			}
-			workitem.replaceItemValue(CHILD_ITEM_PROPERTY, mapOrderItems);
-		}
+	public static List<ItemCollection> explodeChildList(ItemCollection workitem) {
+		return explodeChildList(workitem, CHILD_ITEM_PROPERTY);
 	}
 
 	/**
 	 * converts the Map List of a workitem into a List of ItemCollectons
 	 */
 	@SuppressWarnings({ "rawtypes", "unchecked" })
-	protected void explodeChildList(ItemCollection workitem) {
+	public static List<ItemCollection> explodeChildList(ItemCollection workitem, String childItemName) {
 		// convert current list of childItems into ItemCollection elements
-		childItems = new ArrayList<ItemCollection>();
+		ArrayList<ItemCollection> childItems = new ArrayList<ItemCollection>();
 
-		List<Object> mapOrderItems = workitem.getItemValue(CHILD_ITEM_PROPERTY);
-		int pos = 1;
+		List<Object> mapOrderItems = workitem.getItemValue(childItemName);
 		for (Object mapOderItem : mapOrderItems) {
-
 			if (mapOderItem instanceof Map) {
 				ItemCollection itemCol = new ItemCollection((Map) mapOderItem);
-				itemCol.replaceItemValue("numPos", pos);
 				childItems.add(itemCol);
-				pos++;
 			}
 		}
+		return childItems;
+	}
+
+	/**
+	 * Convert the List of ItemCollections back into a List of Map elements
+	 * 
+	 * @param workitem
+	 */
+	public static void implodeChildList(ItemCollection workitem, List<ItemCollection> childItems) {
+		implodeChildList(workitem, childItems, CHILD_ITEM_PROPERTY);
+	}
+
+	/**
+	 * Convert the List of ItemCollections back into a List of Map elements
+	 * 
+	 * @param workitem
+	 */
+	@SuppressWarnings({ "rawtypes" })
+	public static void implodeChildList(ItemCollection workitem, List<ItemCollection> childItems,
+			String childItemName) {
+		List<Map> mapOrderItems = new ArrayList<Map>();
+		// convert the child ItemCollection elements into a List of Map
+		if (childItems != null) {
+			// iterate over all order items..
+			for (ItemCollection orderItem : childItems) {
+				mapOrderItems.add(orderItem.getAllItems());
+			}
+			workitem.replaceItemValue(childItemName, mapOrderItems);
+		}
 	}
 
 }