From 2a73c4e779101b2ecd4566a740e5f4e817562d51 Mon Sep 17 00:00:00 2001 From: Katherine Liu <67719108+kateliu20@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:59:10 -0400 Subject: [PATCH] Chat Bubble and "Conversation" (#950) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In this PR, I added a Chat bubble that will print back the user input. I also set up a function "call api" that will call the DevXP API in the future, but currently sends back the user input as well. The conversation field is also scrollable (with no scroll bar at the moment). I am also worried about how there is not much padding once the text input becomes multiple lines (like in example 2 of the video), and was wondering if I could get advice on how to add it, because adding padding modifiers seems to only change the box and not the inner text, and the height parameter is what creates the initial space in the text field. https://github.com/user-attachments/assets/50c6bf01-a77a-4b4d-950e-a849ad70ef16 EDIT: here is an update based on feedback. Now, the user's messages are on the right and response is on the left. https://github.com/user-attachments/assets/62170207-3697-41e5-ac0e-3ff24b4cb1fd --- .../kotlin/slack/tooling/aibot/ChatColors.kt | 35 ++++++++ .../kotlin/slack/tooling/aibot/ChatWindow.kt | 90 ++++++++++++++++--- 2 files changed, 114 insertions(+), 11 deletions(-) create mode 100644 skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatColors.kt diff --git a/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatColors.kt b/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatColors.kt new file mode 100644 index 000000000..e7e085bfe --- /dev/null +++ b/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatColors.kt @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2024 Slack Technologies, LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package slack.tooling.aibot + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.ui.graphics.Color +import org.jetbrains.jewel.foundation.theme.JewelTheme + +object ChatColors { + val promptBackground = Color(0xFF45494A) + + // Color(0xFF2d2f30) responseBackground + val responseBackground: Color + @Composable @ReadOnlyComposable get() = JewelTheme.globalColors.infoContent + + // Color(0xFFEAEEF7) userTextColor + val userTextColor: Color + @Composable @ReadOnlyComposable get() = JewelTheme.globalColors.infoContent + + val responseTextColor = Color(0xFFE0EEF7) +} diff --git a/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatWindow.kt b/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatWindow.kt index c642ac93e..975263085 100644 --- a/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatWindow.kt +++ b/skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatWindow.kt @@ -16,7 +16,22 @@ package slack.tooling.aibot import androidx.compose.foundation.background -import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.heightIn +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentWidth +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardActions import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -26,6 +41,7 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha +import androidx.compose.ui.draw.shadow import androidx.compose.ui.input.key.Key import androidx.compose.ui.input.key.KeyEventType import androidx.compose.ui.input.key.isShiftPressed @@ -34,6 +50,7 @@ import androidx.compose.ui.input.key.onPreviewKeyEvent import androidx.compose.ui.input.key.type import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextRange +import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.unit.dp import org.jetbrains.jewel.foundation.theme.JewelTheme @@ -44,20 +61,43 @@ import org.jetbrains.jewel.ui.component.TextArea @Composable fun ChatWindow(modifier: Modifier = Modifier) { - Column( - modifier = Modifier.fillMaxSize().background(JewelTheme.globalColors.paneBackground), - verticalArrangement = Arrangement.Bottom, - ) { - ConversationField(modifier) + var messages by remember { mutableStateOf(listOf()) } + Column(modifier = Modifier.fillMaxSize().background(JewelTheme.globalColors.paneBackground)) { + LazyColumn(modifier = Modifier.weight(1f), reverseLayout = true) { + items(messages.reversed()) { message -> + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = if (message.isMe) Arrangement.End else Arrangement.Start, + ) { + ChatBubble(message) + } + } + } + ConversationField( + modifier = modifier, + onSendMessage = { userMessage -> + messages = messages + Message(userMessage, true) + val response = callApi(userMessage) + messages = messages + Message(response, false) + }, + ) } } @Composable -fun ConversationField(modifier: Modifier = Modifier) { +fun ConversationField(modifier: Modifier = Modifier, onSendMessage: (String) -> Unit) { var textValue by remember { mutableStateOf(TextFieldValue()) } val isTextNotEmpty = textValue.text.isNotBlank() + + fun sendMessage() { + if (isTextNotEmpty) { + onSendMessage(textValue.text) + textValue = TextFieldValue("") + } + } + Row( - modifier.padding(4.dp).height(IntrinsicSize.Min).padding(4.dp), + modifier.padding(4.dp).height(IntrinsicSize.Min), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.Bottom, ) { @@ -67,7 +107,7 @@ fun ConversationField(modifier: Modifier = Modifier) { value = textValue, onValueChange = { newText -> textValue = newText }, modifier = - Modifier.weight(1f).padding(4.dp).heightIn(min = 56.dp).onPreviewKeyEvent { event -> + Modifier.weight(1f).heightIn(min = 56.dp).padding(4.dp).onPreviewKeyEvent { event -> when { (event.key == Key.Enter || event.key == Key.NumPadEnter) && event.type == KeyEventType.KeyDown -> { @@ -82,7 +122,7 @@ fun ConversationField(modifier: Modifier = Modifier) { textValue = TextFieldValue(newText, newSelection) true } else { - textValue = TextFieldValue("") + sendMessage() true } } @@ -99,7 +139,7 @@ fun ConversationField(modifier: Modifier = Modifier) { modifier = Modifier.padding(4.dp).enabled(isTextNotEmpty), onClick = { if (isTextNotEmpty) { - textValue = TextFieldValue() + sendMessage() } }, enabled = isTextNotEmpty, @@ -114,6 +154,34 @@ fun ConversationField(modifier: Modifier = Modifier) { } } +@Composable +fun ChatBubble(message: Message, modifier: Modifier = Modifier) { + Box( + Modifier.wrapContentWidth() + .padding(8.dp) + .shadow(elevation = 0.5.dp, shape = RoundedCornerShape(25.dp), clip = true) + .background( + color = if (message.isMe) ChatColors.promptBackground else ChatColors.responseBackground + ) + .padding(8.dp) + ) { + Text( + text = message.text, + color = if (message.isMe) ChatColors.userTextColor else ChatColors.responseTextColor, + modifier = modifier.padding(8.dp), + fontFamily = FontFamily.SansSerif, + ) + } +} + fun Modifier.enabled(enabled: Boolean): Modifier { return this.then(if (enabled) Modifier.alpha(1.0f) else Modifier.alpha(0.38f)) } + +fun callApi(message: String): String { + // function set up to call the DevXP API in the future. + // right now, just sends back the user input message + return (message) +} + +data class Message(val text: String, val isMe: Boolean)