浏览代码

app: continued development of dialog with ai

Bobarik41p 6 小时之前
父节点
当前提交
65d0b13e65

+ 329 - 0
App/.idea/other.xml

@@ -0,0 +1,329 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="direct_access_persist.xml">
+    <option name="deviceSelectionList">
+      <list>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="27" />
+          <option name="brand" value="DOCOMO" />
+          <option name="codename" value="F01L" />
+          <option name="id" value="F01L" />
+          <option name="manufacturer" value="FUJITSU" />
+          <option name="name" value="F-01L" />
+          <option name="screenDensity" value="360" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1280" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="28" />
+          <option name="brand" value="DOCOMO" />
+          <option name="codename" value="SH-01L" />
+          <option name="id" value="SH-01L" />
+          <option name="manufacturer" value="SHARP" />
+          <option name="name" value="AQUOS sense2 SH-01L" />
+          <option name="screenDensity" value="480" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2160" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="Lenovo" />
+          <option name="codename" value="TB370FU" />
+          <option name="id" value="TB370FU" />
+          <option name="manufacturer" value="Lenovo" />
+          <option name="name" value="Tab P12" />
+          <option name="screenDensity" value="340" />
+          <option name="screenX" value="1840" />
+          <option name="screenY" value="2944" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="31" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="a51" />
+          <option name="id" value="a51" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy A51" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="akita" />
+          <option name="id" value="akita" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="b0q" />
+          <option name="id" value="b0q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S22 Ultra" />
+          <option name="screenDensity" value="600" />
+          <option name="screenX" value="1440" />
+          <option name="screenY" value="3088" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="32" />
+          <option name="brand" value="google" />
+          <option name="codename" value="bluejay" />
+          <option name="id" value="bluejay" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 6a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="caiman" />
+          <option name="id" value="caiman" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9 Pro" />
+          <option name="screenDensity" value="360" />
+          <option name="screenX" value="960" />
+          <option name="screenY" value="2142" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="comet" />
+          <option name="id" value="comet" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9 Pro Fold" />
+          <option name="screenDensity" value="390" />
+          <option name="screenX" value="2076" />
+          <option name="screenY" value="2152" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="29" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="crownqlteue" />
+          <option name="id" value="crownqlteue" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Note9" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2220" />
+          <option name="screenY" value="1080" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="dm3q" />
+          <option name="id" value="dm3q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S23 Ultra" />
+          <option name="screenDensity" value="600" />
+          <option name="screenX" value="1440" />
+          <option name="screenY" value="3088" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="e1q" />
+          <option name="id" value="e1q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S24" />
+          <option name="screenDensity" value="480" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2340" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="felix" />
+          <option name="id" value="felix" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Fold" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2208" />
+          <option name="screenY" value="1840" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="felix" />
+          <option name="id" value="felix" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Fold" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2208" />
+          <option name="screenY" value="1840" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="felix_camera" />
+          <option name="id" value="felix_camera" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Fold (Camera-enabled)" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2208" />
+          <option name="screenY" value="1840" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="gts8uwifi" />
+          <option name="id" value="gts8uwifi" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Tab S8 Ultra" />
+          <option name="screenDensity" value="320" />
+          <option name="screenX" value="1848" />
+          <option name="screenY" value="2960" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="husky" />
+          <option name="id" value="husky" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8 Pro" />
+          <option name="screenDensity" value="390" />
+          <option name="screenX" value="1008" />
+          <option name="screenY" value="2244" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="30" />
+          <option name="brand" value="motorola" />
+          <option name="codename" value="java" />
+          <option name="id" value="java" />
+          <option name="manufacturer" value="Motorola" />
+          <option name="name" value="G20" />
+          <option name="screenDensity" value="280" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1600" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="komodo" />
+          <option name="id" value="komodo" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9 Pro XL" />
+          <option name="screenDensity" value="360" />
+          <option name="screenX" value="1008" />
+          <option name="screenY" value="2244" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="lynx" />
+          <option name="id" value="lynx" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 7a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="31" />
+          <option name="brand" value="google" />
+          <option name="codename" value="oriole" />
+          <option name="id" value="oriole" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 6" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="panther" />
+          <option name="id" value="panther" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 7" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="q5q" />
+          <option name="id" value="q5q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Z Fold5" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1812" />
+          <option name="screenY" value="2176" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="q6q" />
+          <option name="id" value="q6q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Z Fold6" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1856" />
+          <option name="screenY" value="2160" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="30" />
+          <option name="brand" value="google" />
+          <option name="codename" value="r11" />
+          <option name="id" value="r11" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Watch" />
+          <option name="screenDensity" value="320" />
+          <option name="screenX" value="384" />
+          <option name="screenY" value="384" />
+          <option name="type" value="WEAR_OS" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="30" />
+          <option name="brand" value="google" />
+          <option name="codename" value="redfin" />
+          <option name="id" value="redfin" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 5" />
+          <option name="screenDensity" value="440" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2340" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="shiba" />
+          <option name="id" value="shiba" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="tangorpro" />
+          <option name="id" value="tangorpro" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Tablet" />
+          <option name="screenDensity" value="320" />
+          <option name="screenX" value="1600" />
+          <option name="screenY" value="2560" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="tokay" />
+          <option name="id" value="tokay" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2424" />
+        </PersistentDeviceSelectionData>
+      </list>
+    </option>
+  </component>
+</project>

+ 45 - 9
App/app/src/main/java/com/example/mystictale/Screen/DialogWithAI.kt

@@ -3,7 +3,9 @@ package com.example.mystictale.Screen
 import android.os.Build
 import android.widget.Toast
 import androidx.annotation.RequiresExtension
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -16,8 +18,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.Text
@@ -47,6 +47,7 @@ import com.example.mystictale.resources.components.TextFieldForAI
 import com.example.mystictale.resources.components.UserMessage
 import com.example.mystictale.ui.theme.OpenSans
 
+@OptIn(ExperimentalFoundationApi::class)
 @RequiresExtension(extension = Build.VERSION_CODES.S, version = 7)
 @Composable
 fun DialogWithAI(viewModel: AIViewModel) {
@@ -54,7 +55,24 @@ fun DialogWithAI(viewModel: AIViewModel) {
     val context = LocalContext.current
     val query = remember { mutableStateOf("") }
     val enabled = remember { mutableStateOf(true) }
-    val dialog = remember { mutableStateOf(listOf<Message>()) }
+    val dialog = remember {
+        mutableStateOf(
+            listOf(
+                Message(
+                    "system",
+                    "Ты таролог с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬ"
+                ),
+                Message(
+                    "user",
+                    "Ты таролог с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬ"
+                ),
+                Message(
+                    "assistant",
+                    "Ты **таролог** с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬТы таролог с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬТы таролог с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬТы таролог с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬТы таролог с многолетним стажем. Помоги новичку, ответь на все его вопросы ПРО ТАРО сам, не перенапрвляя его к другим. НЕ ОТВЧЕАЙ НА ВОПРОСЫ НЕ СВЯЗАННЫЕ С КАРТАМИ ТАРО, ГОВОРИ ЧТО ТЫ НИЧЕГО НЕ ЗНАЕШЬ"
+                )
+            )
+        )
+    }
     val answer = remember { mutableStateOf(false) }
     Column(
         Modifier
@@ -63,7 +81,7 @@ fun DialogWithAI(viewModel: AIViewModel) {
                 painterResource(id = R.drawable.background),
                 contentScale = ContentScale.FillBounds
             )
-            .padding(top = 10.dp)
+            .padding(top = 20.dp)
             .padding(10.dp),
         verticalArrangement = Arrangement.SpaceBetween,
         horizontalAlignment = Alignment.CenterHorizontally
@@ -73,7 +91,7 @@ fun DialogWithAI(viewModel: AIViewModel) {
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(horizontal = 30.dp)
-                    .padding(top = 30.dp),
+                    .padding(vertical = 30.dp),
                 horizontalArrangement = Arrangement.Center,
                 verticalAlignment = Alignment.Top
             ) {
@@ -117,36 +135,54 @@ fun DialogWithAI(viewModel: AIViewModel) {
         Column(
             modifier = Modifier
                 .fillMaxWidth()
+                .weight(1f)
                 .padding(bottom = 10.dp)
                 .padding(horizontal = 20.dp),
             verticalArrangement = Arrangement.Bottom,
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
 
-            LazyColumn {
+            LazyColumn(Modifier) {
+
                 items(dialog.value) {
+
+                    Spacer(Modifier.height(10.dp))
                     if (it.role == "user") {
                         UserMessage(it.text)
                     }
-                    Spacer(Modifier.height(20.dp))
+                    Spacer(Modifier.height(10.dp))
                     if (it.role == "assistant") {
                         AIMessage(
                             it.text
                         )
+
                     }
 
+                    Spacer(Modifier.height(10.dp))
+
 
                 }
             }
+        }
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .background(Color.Transparent)
 
-            Spacer(Modifier.height(10.dp))
+                .padding(horizontal = 20.dp)
+                .padding(vertical = 5.dp),
+            verticalAlignment = Alignment.Bottom,
+            horizontalArrangement = Arrangement.Center
+        ) {
             TextFieldForAI(query.value, enabled.value, onValue = { query.value = it }, onClick = {
+                dialog.value += Message("user", query.value)
                 viewModel.sendARequest(
-                    listOf(Message("user", query.value))
+                    dialog.value
                 )
                 answer.value = true
                 query.value = ""
             })
+            Spacer(Modifier.height(10.dp))
 
         }
     }

+ 9 - 19
App/app/src/main/java/com/example/mystictale/Screen/TypewriterText.kt

@@ -1,10 +1,12 @@
 package com.example.mystictale.Screen
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicText
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -19,11 +21,8 @@ import kotlinx.coroutines.delay
 
 @Composable
 fun TypewriterText(
-    texts: List<String>,
-) {
-    var textIndex by remember {
-        mutableStateOf(0)
-    }
+    texts: String,
+){
     var textToDisplay by remember {
         mutableStateOf("")
     }
@@ -31,26 +30,17 @@ fun TypewriterText(
     LaunchedEffect(
         key1 = texts,
     ) {
-        while (textIndex < texts.size) {
-            texts[textIndex].forEachIndexed { charIndex, _ ->
-                textToDisplay = texts[textIndex]
+            texts.forEachIndexed { charIndex, _ ->
+                textToDisplay = texts
                     .substring(
                         startIndex = 0,
                         endIndex = charIndex + 1,
                     )
-                delay(50)
+                delay(40)
             }
-            textIndex = (textIndex + 1) % texts.size
-            delay(1000)
-        }
     }
 
-    Text(
-        text = textToDisplay,
-        fontWeight = FontWeight.Normal,
-        fontFamily = OpenSans,
-        fontSize = 13.sp,
-        color = Color.White,
-        modifier = Modifier.padding(7.dp)
+    BasicText(
+        text = texts
     )
 }

+ 2 - 1
App/app/src/main/java/com/example/mystictale/resources/components/AIMessage.kt

@@ -14,6 +14,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.example.mystictale.Screen.TypewriterText
+import com.example.mystictale.parseMarkdownToAnnotatedString
 import com.example.mystictale.ui.theme.DarkPurple
 
 @Composable
@@ -42,7 +43,7 @@ fun AIMessage(message: String) {
                 )
                 .fillMaxWidth()
         ) {
-            TypewriterText(listOf(message))
+            TypewriterText(parseMarkdownToAnnotatedString(message).toString())
         }
     }
 

+ 3 - 3
App/app/src/main/java/com/example/mystictale/resources/components/TriangleEdgeShape.kt

@@ -16,9 +16,9 @@ class TriangleEdgeShape(val offset: Int) : Shape {
         density: Density
     ): Outline {
         val trianglePath = Path().apply {
-            moveTo(x = 0f, y = size.height-offset)
-            lineTo(x = 0f, y = size.height)
-            lineTo(x = 0f + offset, y = size.height)
+            moveTo(x = 0f, y = size.height-offset - 20f)
+            lineTo(x = 0f, y = size.height - 20f)
+            lineTo(x = 0f + offset, y = size.height - 20f)
         }
         return Outline.Generic(path = trianglePath)
     }

+ 1 - 1
App/app/src/main/java/com/example/mystictale/resources/components/UserMessage.kt

@@ -51,7 +51,7 @@ fun UserMessage(message: String) {
             modifier = Modifier
                 .background(
                     color = Purple,
-                    shape = TriangleEdgeShape(20)
+                    shape = TriangleEdgeShape(40)
                 )
                 .width(8.dp)
                 .fillMaxHeight()