Skate AI Initial Chat User Text Field and Window (#948)

This is a continuation of #927, but because of the Jewel update in #937,
I ended up running into some hiccups with transitioning the project and
migrating to a different version of intellij gradle platform plugin. We
reverted it back in #947 and this PR reflects the changes that are
compatible with the old Jewel version (which is back on main).

I have included the functionality for user input, where send button
clears text, enter clears text, and shift + enter adds new lines. Users
can also add multiple lines. I also added a function where the send
button is faded and unselectable until there is text input. In future
PRs, I will add the chat conversation as well, and this is just a start.


https://github.com/user-attachments/assets/94971a43-476e-4d67-924c-e012c633bc3c

<!--
  ⬆ Put your description above this! ⬆

  Please be descriptive and detailed.
  
Please read our [Contributing
Guidelines](https://github.com/tinyspeck/slack-gradle-plugin/blob/main/.github/CONTRIBUTING.md)
and [Code of Conduct](https://slackhq.github.io/code-of-conduct).

Don't worry about deleting this, it's not visible in the PR!
-->

skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatPanel.kt

@@ -0,0 +1,30 @@
+/*
+ * 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.ui.awt.ComposePanel
+import java.awt.Dimension
+import javax.swing.JComponent
+import slack.tooling.projectgen.SlackDesktopTheme
+
+object ChatPanel {
+  fun createPanel(): JComponent {
+    return ComposePanel().apply {
+      preferredSize = Dimension(400, 600)
+      setContent { SlackDesktopTheme { ChatWindow() } }
+    }
+  }
+}

skate-plugin/project-gen/src/jvmMain/kotlin/slack/tooling/aibot/ChatWindow.kt

@@ -0,0 +1,119 @@
+/*
+ * 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.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+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.input.key.Key
+import androidx.compose.ui.input.key.KeyEventType
+import androidx.compose.ui.input.key.isShiftPressed
+import androidx.compose.ui.input.key.key
+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.input.TextFieldValue
+import androidx.compose.ui.unit.dp
+import org.jetbrains.jewel.foundation.theme.JewelTheme
+import org.jetbrains.jewel.ui.component.Icon
+import org.jetbrains.jewel.ui.component.IconButton
+import org.jetbrains.jewel.ui.component.Text
+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)
+  }
+}
+
+@Composable
+fun ConversationField(modifier: Modifier = Modifier) {
+  var textValue by remember { mutableStateOf(TextFieldValue()) }
+  val isTextNotEmpty = textValue.text.isNotBlank()
+  Row(
+    modifier.padding(4.dp).height(IntrinsicSize.Min).padding(4.dp),
+    horizontalArrangement = Arrangement.Center,
+    verticalAlignment = Alignment.Bottom,
+  ) {
+    // user text input. enter sends the message and clears text
+    // shift + enter adds a new line and expands the text field
+    TextArea(
+      value = textValue,
+      onValueChange = { newText -> textValue = newText },
+      modifier =
+        Modifier.weight(1f).padding(4.dp).heightIn(min = 56.dp).onPreviewKeyEvent { event ->
+          when {
+            (event.key == Key.Enter || event.key == Key.NumPadEnter) &&
+              event.type == KeyEventType.KeyDown -> {
+              if (event.isShiftPressed) {
+                val newText =
+                  textValue.text.replaceRange(
+                    textValue.selection.start,
+                    textValue.selection.end,
+                    "\n",
+                  )
+                val newSelection = TextRange(textValue.selection.start + 1)
+                textValue = TextFieldValue(newText, newSelection)
+                true
+              } else {
+                textValue = TextFieldValue("")
+                true
+              }
+            }
+            else -> false
+          }
+        },
+      placeholder = { Text("Start your conversation") },
+      keyboardActions = KeyboardActions.Default,
+      maxLines = Int.MAX_VALUE,
+    )
+    Column(Modifier.fillMaxHeight(), verticalArrangement = Arrangement.Center) {
+      // button will be disabled if there is no text
+      IconButton(
+        modifier = Modifier.padding(4.dp).enabled(isTextNotEmpty),
+        onClick = {
+          if (isTextNotEmpty) {
+            textValue = TextFieldValue()
+          }
+        },
+        enabled = isTextNotEmpty,
+      ) {
+        Icon(
+          painter = painterResource("/drawable/send.svg"),
+          contentDescription = "Send",
+          modifier = Modifier.size(20.dp),
+        )
+      }
+    }
+  }
+}
+
+fun Modifier.enabled(enabled: Boolean): Modifier {
+  return this.then(if (enabled) Modifier.alpha(1.0f) else Modifier.alpha(0.38f))
+}

skate-plugin/src/main/kotlin/com/slack/sgp/intellij/aibot/ChatBotToolWindow.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 com.slack.sgp.intellij.aibot
+
+import com.intellij.openapi.project.Project
+import com.intellij.openapi.wm.ToolWindow
+import com.intellij.openapi.wm.ToolWindowFactory
+import com.intellij.ui.content.ContentFactory
+import javax.swing.JComponent
+import slack.tooling.aibot.ChatPanel
+
+class ChatBotToolWindow : ToolWindowFactory {
+  override fun createToolWindowContent(project: Project, toolWindow: ToolWindow) {
+    val contentFactory = ContentFactory.getInstance()
+    val content = contentFactory.createContent(createComposePanel(), "", false)
+    toolWindow.contentManager.addContent(content)
+  }
+
+  private fun createComposePanel(): JComponent {
+    return ChatPanel.createPanel()
+  }
+}

skate-plugin/src/main/resources/META-INF/plugin.xml

@@ -39,6 +39,7 @@
         <externalAnnotator language="kotlin" implementationClass="com.slack.sgp.intellij.featureflags.FeatureFlagAnnotator"/>
         <projectIndexingActivityHistoryListener implementation="com.slack.sgp.intellij.idemetrics.IndexingListener"/>
         <postStartupActivity implementation="com.slack.sgp.intellij.PostStartupActivityExtension"/>
+        <toolWindow factoryClass="com.slack.sgp.intellij.aibot.ChatBotToolWindow" id="DevXPAI" anchor="right" canCloseContents="true" secondary="false" icon="AllIcons.Actions.Lightning" />
     </extensions>
 
     <projectListeners>