Initial commit: AI chat assistant with workflow chat, workspace, and profile tabs

Co-Authored-By: Claude <noreply@anthropic.com>

components/InputArea.uvue

@@ -0,0 +1,126 @@
+<template>
+  <view class="input-area">
+    <view class="input-area__container">
+      <!-- Text input -->
+      <input
+        class="input-area__field"
+        :class="{ 'input-area__field--has-text': hasText }"
+        type="text"
+        :value="inputText"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :maxlength="2000"
+        placeholder-style="color: rgba(255, 255, 255, 0.3);"
+        @input="onInput"
+        @confirm="onSend"
+        confirm-type="send"
+      />
+
+      <!-- Send button -->
+      <view
+        class="input-area__send-btn"
+        :class="{ 'input-area__send-btn--active': hasText && !disabled }"
+        @tap="onSend"
+      >
+        <text class="input-area__send-icon">↑</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+const props = defineProps<{
+  disabled: boolean
+  placeholder: string
+}>()
+
+const emit = defineEmits<{
+  send: [text: string]
+}>()
+
+const inputText = ref('')
+
+const hasText = computed<boolean>(() => {
+  return inputText.value.trim().length > 0
+})
+
+function onInput(e: any): void {
+  inputText.value = e.detail.value
+}
+
+function onSend(): void {
+  const text = inputText.value.trim()
+  if (text && !props.disabled) {
+    emit('send', text)
+    inputText.value = ''
+  }
+}
+</script>
+
+<style scoped>
+.input-area {
+  position: relative;
+  z-index: 100;
+  background: rgba(15, 15, 26, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+}
+
+.input-area__container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.input-area__field {
+  flex: 1;
+  height: 72rpx;
+  border-radius: 36rpx;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 0 24rpx;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+  transition: border-color 0.25s ease;
+}
+
+.input-area__field--has-text {
+  border-color: rgba(108, 92, 231, 0.4);
+}
+
+.input-area__field:focus {
+  border-color: rgba(108, 92, 231, 0.6);
+}
+
+.input-area__send-btn {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 16rpx;
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+}
+
+.input-area__send-btn--active {
+  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
+  box-shadow: 0 4rpx 16rpx rgba(108, 92, 231, 0.35);
+}
+
+.input-area__send-icon {
+  font-size: 40rpx;
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 600;
+  line-height: 1;
+}
+
+.input-area__send-btn--active .input-area__send-icon {
+  color: #ffffff;
+}
+</style>