diff --git a/module/ai/css/miniprogramchat.ui.css b/module/ai/css/miniprogramchat.ui.css index 7284efa2be..960c5595ba 100644 --- a/module/ai/css/miniprogramchat.ui.css +++ b/module/ai/css/miniprogramchat.ui.css @@ -8,19 +8,13 @@ .mini-program .detail { width: 390px; - flex: none; background: #fff; - display: flex; - flex-direction: column; - height: 100%; } .mini-program .detail .header { padding: 24px 20px 20px 20px; - display: flex; gap: 20px; color: var(--color-slate-800); - flex: none; border-bottom: 1px solid var(--color-gray-200); } @@ -32,21 +26,12 @@ .mini-program .detail .header .program-avatar { width: 46px; height: 46px; - flex: none; -} - -.mini-program .detail .header .content { - flex: auto; - overflow: hidden; } .mini-program .detail .header .content .title { font-size: 14px; font-weight: 500; padding-right: 64px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } .mini-program .detail .header .content .desc { @@ -58,20 +43,9 @@ } .mini-program .detail .body { - flex: auto; - display: flex; - flex-direction: column; padding-top: 20px; padding-left: 20px; padding-right: 20px; - overflow: hidden; -} - -.mini-program .detail .body .language-model { - display: flex; - justify-content: space-between; - align-items: center; - flex: none; } .mini-program .detail .body .language-model .btn { @@ -82,18 +56,17 @@ background: var(--color-gray-300); } -.mini-program .detail .body .form-container { - flex: auto; - overflow-y: auto; -} - .mini-program .detail .footer { padding: 20px 20px 24px 20px; - flex: none; } .mini-program .chat { - flex: auto; flex-basis: 67%; background: #fff; } + +.mini-program .chat .chat-tip { + gap: 8px; + font-size: 14px; + color: var(--color-slate-600); +} diff --git a/module/ai/lang/de.php b/module/ai/lang/de.php index 3d75fc6ce7..443ececa5f 100644 --- a/module/ai/lang/de.php +++ b/module/ai/lang/de.php @@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = 'Field configuration'; $lang->ai->miniPrograms->summary = 'There are %s small programs on this page.'; $lang->ai->miniPrograms->generate = 'Generate'; $lang->ai->miniPrograms->regenerate = 'Regenerate'; +$lang->ai->miniPrograms->chatTip = 'Click the generate button on the left to give it a try.'; $lang->ai->models = new stdclass(); $lang->ai->models->title = 'Language Model Configuration'; diff --git a/module/ai/lang/en.php b/module/ai/lang/en.php index 5fce30cddb..f54ba8ad75 100644 --- a/module/ai/lang/en.php +++ b/module/ai/lang/en.php @@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = 'Field configuration'; $lang->ai->miniPrograms->summary = 'There are %s small programs on this page.'; $lang->ai->miniPrograms->generate = 'Generate'; $lang->ai->miniPrograms->regenerate = 'Regenerate'; +$lang->ai->miniPrograms->chatTip = 'Click the generate button on the left to give it a try.'; $lang->ai->models = new stdclass(); $lang->ai->models->title = 'Language Model Configuration'; diff --git a/module/ai/lang/fr.php b/module/ai/lang/fr.php index 5fce30cddb..f54ba8ad75 100644 --- a/module/ai/lang/fr.php +++ b/module/ai/lang/fr.php @@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = 'Field configuration'; $lang->ai->miniPrograms->summary = 'There are %s small programs on this page.'; $lang->ai->miniPrograms->generate = 'Generate'; $lang->ai->miniPrograms->regenerate = 'Regenerate'; +$lang->ai->miniPrograms->chatTip = 'Click the generate button on the left to give it a try.'; $lang->ai->models = new stdclass(); $lang->ai->models->title = 'Language Model Configuration'; diff --git a/module/ai/lang/zh-cn.php b/module/ai/lang/zh-cn.php index b817ae7753..526506e3c8 100644 --- a/module/ai/lang/zh-cn.php +++ b/module/ai/lang/zh-cn.php @@ -494,6 +494,7 @@ $lang->ai->miniPrograms->fieldConfiguration = '字段配置'; $lang->ai->miniPrograms->summary = '本页共 %s 个小程序。'; $lang->ai->miniPrograms->generate = '生成'; $lang->ai->miniPrograms->regenerate = '重新生成'; +$lang->ai->miniPrograms->chatTip = '点击左侧的生成按钮试试吧'; $lang->ai->models = new stdclass(); $lang->ai->models->title = '语言模型配置'; diff --git a/module/ai/ui/miniprogramchat.html.php b/module/ai/ui/miniprogramchat.html.php index 764ecd10bb..2895580a5f 100644 --- a/module/ai/ui/miniprogramchat.html.php +++ b/module/ai/ui/miniprogramchat.html.php @@ -8,50 +8,53 @@ jsVar('regenerateLang', $lang->ai->miniPrograms->regenerate); jsVar('emptyNameWarning', $lang->ai->miniPrograms->field->emptyNameWarning); $formGroups = array(); -foreach($fields as $field) +if(count($fields) !== 0) { - if($field->type === 'textarea') + foreach($fields as $field) { - $control = textarea( - set::rows(1), - set::name("field-{$field->id}"), - set::placeholder($field->placeholder), - setData('name', $field->name) - ); - } - elseif($field->type === 'radio') - { - $options = explode(',', $field->options); - $control = picker( - set::name("field-{$field->id}"), - set::items(array_combine($options, $options)), - setData('name', $field->name) - ); - } - elseif($field->type === 'checkbox') - { - $options = explode(',', $field->options); - $control = picker( - set::name("field-{$field->id}"), - set::items(array_combine($options, $options)), - set::multiple(true), - setData('name', $field->name) - ); - } - else - { - $control = input( - set::name("field-{$field->id}"), - set::placeholder($field->placeholder), - setData('name', $field->name) - ); - } + if($field->type === 'textarea') + { + $control = textarea( + set::rows(1), + set::name("field-{$field->id}"), + set::placeholder($field->placeholder), + setData('name', $field->name) + ); + } + elseif($field->type === 'radio') + { + $options = explode(',', $field->options); + $control = picker( + set::name("field-{$field->id}"), + set::items(array_combine($options, $options)), + setData('name', $field->name) + ); + } + elseif($field->type === 'checkbox') + { + $options = explode(',', $field->options); + $control = picker( + set::name("field-{$field->id}"), + set::items(array_combine($options, $options)), + set::multiple(true), + setData('name', $field->name) + ); + } + else + { + $control = input( + set::name("field-{$field->id}"), + set::placeholder($field->placeholder), + setData('name', $field->name) + ); + } - $formGroups[] = formGroup( - set::label($field->name), - set::required($field->required === '1'), - $control - ); + $formGroups[] = formGroup( + set::label($field->name), + set::required($field->required === '1'), + $control + ); + } } jsVar('fields', $fields); @@ -63,18 +66,18 @@ $delete = $star === 'star' ? 'true' : 'false'; div( setClass('mini-program fixed flex'), div( - setClass('detail col shadow-md'), + setClass('detail col shadow-md h-full flex-none'), div( - setClass('header', 'relative'), + setClass('header relative flex flex-none'), div( - setClass('program-avatar center'), + setClass('program-avatar center flex-none'), setStyle(array('border' => "1px solid {$config->ai->miniPrograms->themeList[$iconTheme][1]}", 'background-color' => $config->ai->miniPrograms->themeList[$iconTheme][0])), html($config->ai->miniPrograms->iconList[$iconName]) ), div( - setClass('content'), + setClass('content flex-1 overflow-hidden'), div( - setClass('title pb-2'), + setClass('title pb-2 ellipsis'), $miniProgram->name ), div( @@ -93,9 +96,9 @@ div( ) ), div( - setClass('body'), + setClass('body col overflow-hidden', empty($formGroups) ? 'flex-none' : 'flex-1'), div( - setClass('language-model'), + setClass('language-model flex flex-none justify-between items-center'), div( setClass('content flex gap-2.5'), span( @@ -104,25 +107,29 @@ div( ), span($lang->ai->miniPrograms->modelList[$miniProgram->model]), ), - btn( - set::size('md'), - setClass('ghost'), - set::icon('trash'), - $lang->ai->chatReset, - on::click('window.aiMiniProgramChat.handleRestBtnClick') - ), + empty($formGroups) + ? null + : btn( + set::size('md'), + setClass('ghost'), + set::icon('trash'), + $lang->ai->chatReset, + on::click('window.aiMiniProgramChat.handleRestBtnClick') + ) ), - div( - setClass('form-container p-1'), - form( - set::grid(false), - set::actions(array()), - $formGroups - ), - ) + empty($formGroups) + ? null + : div( + setClass('form-container p-1 flex-1 overflow-y-auto'), + form( + set::grid(false), + set::actions(array()), + $formGroups + ) + ) ), div( - setClass('footer'), + setClass('footer flex-none'), btn( setClass('primary block w-full'), $lang->ai->miniPrograms->generate, @@ -131,7 +138,18 @@ div( ) ), div( - setClass('chat') + setClass('chat shadow-md flex-1 center'), + div( + setClass('chat-tip flex'), + html(<< + + + + + END), + $lang->ai->miniPrograms->chatTip + ) ) );