enhance: autosize chatbox input

src/main/frontend/components/ai.cljs

@@ -33,7 +33,8 @@
   [^js e q]
   (let [drawing? (string/starts-with? q "/draw ")]
     (when (and (or (nil? e) (= (gobj/get e "key") "Enter"))
-               (not (string/blank? q)))
+               (not (string/blank? q))
+               (not (gobj/get e "shiftKey")))
       (swap! *messages conj
              {:block/properties {:logseq.ai.type "question"}
               :block/content q})
@@ -65,13 +66,14 @@
                              e-type (gobj/getValueByKeys e "type")]
                          (state/set-state! [:ui/chat :q] value)))]
     [:div.input-box
-     [:input.form-input
-      {:auto-focus true
+     (ui/ls-textarea
+      {:id "chat-box-input"
+       :auto-focus true
        :placeholder "Write a message"
        :aria-label "Write a message"
        :value q
        :on-change on-change-fn
-       :on-key-down (fn [e] (new-message! e q))}]]))
+       :on-key-up (fn [e] (new-message! e q))})]))
 
 (rum/defc conversation-message < rum/static
   [block]
@@ -113,7 +115,7 @@
   (let [conversation-id (state/sub :chat/current-conversation)]
     [:div.chat
      (conversations conversation-id)
-     [:div.flex.flex-1.relative
+     [:div.flex.flex-1.flex-col
       (conversation conversation-id)
       (input)]]))
 
@@ -386,4 +388,5 @@
                        :on-input (fn [v] (reset! *input v))
                        :extract-fn :name
                        :close-modal? false
+                       ;; :textarea? true
                        :input-default-placeholder "Ask AI"}))]))

src/main/frontend/components/ai.css

@@ -15,8 +15,7 @@
     }
 
     #conversation {
-        @apply p-2 overflow-y-auto w-full;
-        height: 550px;
+        @apply p-2 overflow-y-auto w-full flex flex-1 overflow-x-hidden;
     }
 
     .conversation-item {
@@ -27,7 +26,16 @@
     }
 
     .input-box {
-        @apply absolute bottom-0 p-2 w-full;
+        @apply p-2 w-full;
+
+        textarea {
+            @apply overflow-y-auto overflow-x-hidden;
+            border: 1px solid var(--ls-border-color);
+            background: transparent;
+            resize: none;
+            box-shadow: none;
+            max-height: 400px;
+        }
     }
 
     input {

src/main/frontend/components/select.cljs

@@ -46,7 +46,7 @@
   [state {:keys [items limit on-chosen empty-placeholder
                  prompt-key input-default-placeholder close-modal?
                  extract-fn host-opts on-input input-opts
-                 item-cp transform-fn tap-*input-val
+                 item-cp transform-fn tap-*input-val textarea?
                  multiple-choices? on-apply _selected-choices]
           :or {limit 100
                prompt-key :select/default-prompt
@@ -57,48 +57,51 @@
         *selected-choices (::selected-choices state)]
     (when (fn? tap-*input-val)
       (tap-*input-val input))
-    [:div.cp__select
-     (merge {:class "cp__select-main"} host-opts)
-     [:div.input-wrap
-      [:input.cp__select-input.w-full
-       (merge {:type        "text"
-               :placeholder (or input-default-placeholder (t prompt-key))
-               :auto-focus  true
-               :value       @input
-               :on-change   (fn [e]
-                              (let [v (util/evalue e)]
-                                (reset! input v)
-                                (and (fn? on-input) (on-input v))))}
-              input-opts)]]
+    (let [opts (merge {:type        "text"
+                       :placeholder (or input-default-placeholder (t prompt-key))
+                       :auto-focus  true
+                       :value       @input
+                       :on-change   (fn [e]
+                                      (let [v (util/evalue e)]
+                                        (reset! input v)
+                                        (and (fn? on-input) (on-input v))))
+                       :class "cp__select-input w-full"}
+                      input-opts)]
+      [:div.cp__select
+       (merge {:class "cp__select-main"} host-opts)
+       [:div.input-wrap
+        (if textarea?
+          (ui/ls-textarea opts)
+          [:input opts])]
 
-     (let [non-matched-items (filter :select/non-matched? items)
-           search-result (search/fuzzy-search items @input :limit limit :extract-fn extract-fn)
-           search-result' (if (and (empty? search-result) (seq non-matched-items))
-                            non-matched-items
-                            search-result)]
-       [:div.item-results-wrap
-        (ui/auto-complete
-         (cond-> search-result'
-           (fn? transform-fn)
-           (transform-fn @input))
+       (let [non-matched-items (filter :select/non-matched? items)
+             search-result (search/fuzzy-search items @input :limit limit :extract-fn extract-fn)
+             search-result' (if (and (empty? search-result) (seq non-matched-items))
+                              non-matched-items
+                              search-result)]
+         [:div.item-results-wrap
+          (ui/auto-complete
+           (cond-> search-result'
+             (fn? transform-fn)
+             (transform-fn @input))
 
-         {:item-render       (or item-cp (fn [result chosen?]
-                                           (render-item result chosen? multiple-choices? *selected-choices)))
-          :class             "cp__select-results"
-          :on-chosen         (fn [x]
-                               (reset! input "")
-                               (if multiple-choices?
-                                 (if (@*selected-choices x)
-                                   (swap! *selected-choices disj x)
-                                   (swap! *selected-choices conj x))
-                                 (do
-                                   (when close-modal? (state/close-modal!))
-                                   (when on-chosen
-                                     (on-chosen (if multiple-choices? @*selected-choices x))))))
-          :empty-placeholder (empty-placeholder t)})])
+           {:item-render       (or item-cp (fn [result chosen?]
+                                             (render-item result chosen? multiple-choices? *selected-choices)))
+            :class             "cp__select-results"
+            :on-chosen         (fn [x]
+                                 (reset! input "")
+                                 (if multiple-choices?
+                                   (if (@*selected-choices x)
+                                     (swap! *selected-choices disj x)
+                                     (swap! *selected-choices conj x))
+                                   (do
+                                     (when close-modal? (state/close-modal!))
+                                     (when on-chosen
+                                       (on-chosen (if multiple-choices? @*selected-choices x))))))
+            :empty-placeholder (empty-placeholder t)})])
 
-     (when multiple-choices?
-       [:div.p-4 (ui/button "Apply updates" :on-click on-apply)])]))
+       (when multiple-choices?
+         [:div.p-4 (ui/button "Apply updates" :on-click on-apply)])])))
 
 (defn select-config
   "Config that supports multiple types (uses) of this component. To add a new

src/main/frontend/modules/shortcut/config.cljs

@@ -74,10 +74,10 @@
 
    :whiteboard/select            {:binding ["1" "s"]
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "select")}
-   
+
    :whiteboard/pan               {:binding ["2" "p"]
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "move")}
-   
+
    :whiteboard/portal            {:binding "3"
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "logseq-portal")}
 
@@ -86,13 +86,13 @@
 
    :whiteboard/highlighter       {:binding ["5" "h"]
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "highlighter")}
-   
+
    :whiteboard/eraser            {:binding ["6" "e"]
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "erase")}
-   
+
    :whiteboard/connector         {:binding ["7" "c"]
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "line")}
-   
+
    :whiteboard/text              {:binding ["8" "t"]
                                   :fn      #(.selectTool ^js (state/active-tldraw-app) "text")}
 
@@ -332,7 +332,7 @@
                                     :fn      editor-handler/zoom-out!}
 
    :editor/toggle-undo-redo-mode   {:fn      undo-redo/toggle-undo-redo-mode!}
-   
+
    :editor/toggle-number-list      {:binding "t n"
                                     :fn #(state/pub-event! [:editor/toggle-own-number-list (state/get-selection-block-ids)])}
 
@@ -705,9 +705,6 @@
                           :go/search-in-page
                           :go/search
                           :go/ai-chat
-                          :go/electron-find-in-page
-                          :go/electron-jump-to-the-next
-                          :go/electron-jump-to-the-previous
                           :go/backward
                           :go/forward
                           :search/re-index
@@ -718,6 +715,11 @@
                           :ai/ask])
      (with-meta {:before m/prevent-default-behavior}))
 
+    :shortcut.handler/global-not-prevent-default
+    (build-category-map [:go/electron-find-in-page
+                         :go/electron-jump-to-the-next
+                         :go/electron-jump-to-the-previous])
+
     :shortcut.handler/misc
     ;; always overrides the copy due to "mod+c mod+s"
     {:misc/copy              (:misc/copy              all-default-keyboard-shortcuts)}
@@ -898,7 +900,7 @@
     :whiteboard/group
     :whiteboard/ungroup
     :whiteboard/toggle-grid]
-   
+
    :shortcut.category/others
    [:ai/ask
     :pdf/previous-page

src/main/frontend/modules/shortcut/core.cljs

@@ -135,7 +135,8 @@
   (->> [:shortcut.handler/misc
         :shortcut.handler/editor-global
         :shortcut.handler/global-non-editing-only
-        :shortcut.handler/global-prevent-default]
+        :shortcut.handler/global-prevent-default
+        :shortcut.handler/global-not-prevent-default]
        (map #(install-shortcut! % {}))
        doall))