ai: add 'Generate with AI' to template selection as Features.AINewDoc…

…ument

src/elm/Doc/UI.elm

@@ -5,6 +5,8 @@ import Browser.Dom exposing (Element)
 import Coders exposing (treeToMarkdownString)
 import Doc.TreeStructure as TreeStructure exposing (defaultTree)
 import Doc.TreeUtils as TreeUtils exposing (..)
+import Feature
+import Features exposing (Feature(..))
 import GlobalData exposing (GlobalData)
 import Html exposing (Html, a, div, h2, h3, h5, hr, input, li, pre, span, textarea)
 import Html.Attributes exposing (..)
@@ -18,6 +20,7 @@ import Markdown.Renderer exposing (Renderer)
 import Octicons as Icon exposing (defaultOptions)
 import Regex exposing (Regex, replace)
 import Route
+import Session exposing (LoggedIn)
 import SharedUI exposing (ctrlOrCmdText, modalWrapper)
 import Svg exposing (g, svg)
 import Svg.Attributes exposing (d, fill, fontFamily, fontSize, fontWeight, preserveAspectRatio, stroke, strokeDasharray, strokeDashoffset, strokeLinecap, strokeLinejoin, strokeMiterlimit, strokeWidth, textAnchor, version, viewBox)
@@ -189,23 +192,33 @@ viewDocumentLoadingSpinner =
 
 
 viewTemplateSelector :
-    Language
+    LoggedIn
+    -> Language
     ->
         { modalClosed : msg
+        , aiNewClicked : msg
         , importBulkClicked : msg
         , importTextClicked : msg
         , importOpmlRequested : msg
         , importJSONRequested : msg
         }
     -> List (Html msg)
-viewTemplateSelector language msgs =
+viewTemplateSelector session language msgs =
     [ div [ id "templates-block" ]
         [ h2 [] [ text language New ]
         , div [ class "template-row" ]
             [ a [ id "template-new", class "template-item", href (Route.toString Route.DocNew) ]
                 [ div [ classList [ ( "template-thumbnail", True ), ( "new", True ) ] ] []
                 , div [ class "template-title" ] [ text language HomeBlank ]
                 ]
+            , if Feature.enabled AINewDocument session then
+                div [ id "template-ai-new", class "template-item", onClick msgs.aiNewClicked ]
+                    [ div [ classList [ ( "template-thumbnail", True ) ] ] [ Icon.circuitBoard (Icon.defaultOptions |> Icon.size 48) ]
+                    , div [ class "template-title" ] [ textNoTr "Generate with AI" ]
+                    ]
+
+              else
+                textNoTr ""
             ]
         , h2 [] [ text language ImportSectionTitle ]
         , div [ class "template-row" ]

src/elm/Doc/UIStyled.elm

@@ -0,0 +1,43 @@
+module Doc.UIStyled exposing (viewAINewPrompt)
+
+import Css exposing (..)
+import Html exposing (Html)
+import Html.Styled exposing (div, label, text, textarea, toUnstyled)
+import Html.Styled.Attributes exposing (autofocus, css, for, id, rows)
+import Html.Styled.Events exposing (onInput)
+import SharedUI exposing (modalWrapper)
+import Styles exposing (colors)
+import Translation exposing (Language)
+
+
+viewAINewPrompt : Language -> { modalClosed : msg, promptInput : String -> msg } -> List (Html msg)
+viewAINewPrompt lang msgs =
+    [ div [ css [ displayFlex, flexDirection column, property "gap" "10px" ] ]
+        [ label [ for "ai-new-prompt", css [ fontWeight bold ] ] [ text "Prompt" ]
+        , textarea
+            [ id "ai-new-prompt"
+            , css [ fontSize (px 16), padding (px 10) ]
+            , onInput msgs.promptInput
+            , autofocus True
+            , rows 8
+            ]
+            []
+        , div [ css [ displayFlex, justifyContent flexEnd ] ]
+            [ div
+                [ css
+                    [ fontWeight bold
+                    , color colors.nearWhite
+                    , backgroundColor colors.green
+                    , padding (px 10)
+                    , borderRadius (px 6)
+                    , cursor pointer
+                    , hover [ boxShadow4 zero (px 2) (px 3) (rgba 0 0 0 0.2) ]
+                    , active [ marginTop (px 1) ]
+                    ]
+                ]
+                [ text "Generate" ]
+            ]
+        ]
+    ]
+        |> List.map toUnstyled
+        |> modalWrapper msgs.modalClosed Nothing Nothing "Generate Document"

src/elm/Features.elm

@@ -7,6 +7,7 @@ type Feature
     = VotingAppLinkInMenu
     | VotingAppLinkInSidebar
     | AIPromptFeature
+    | AINewDocument
 
 
 decoder : Decoder (List Feature)
@@ -30,5 +31,8 @@ maybeFeature str =
         "ai-prompt-feature" ->
             Just AIPromptFeature
 
+        "ai-new-document" ->
+            Just AINewDocument
+
         _ ->
             Nothing

src/elm/Page/App.elm

@@ -14,6 +14,7 @@ import Doc.Metadata as Metadata exposing (Metadata)
 import Doc.Switcher
 import Doc.TreeStructure as TreeStructure exposing (defaultTree)
 import Doc.UI as UI
+import Doc.UIStyled as UIStyled
 import Doc.VideoViewer as VideoViewer
 import Feature
 import Features exposing (Feature(..))
@@ -113,6 +114,7 @@ type ModalState
     | MigrateModal
     | SidebarContextMenu String ( Float, Float )
     | TemplateSelector
+    | AINewPrompt String
     | HelpScreen
     | VideoViewer VideoViewer.Model
     | Wordcount Page.Doc.Model
@@ -406,6 +408,7 @@ type Msg
     | ImportJSONIdGenerated Tree String String
     | ImportSingleCompleted String
       -- AI
+    | AINewClicked
     | AIButtonClicked
     | AIPromptFieldChanged String
       -- Misc UI
@@ -1572,11 +1575,19 @@ update msg model =
             ( model, Route.pushUrl model.navKey (Route.DocUntitled docId) )
 
         -- AI
+        AINewClicked ->
+            ( { model | modalState = AINewPrompt "" }
+            , Task.attempt (always NoOp) (Browser.Dom.focus "ai-new-prompt")
+            )
+
         AIButtonClicked ->
             applyParentMsg OpenAIPrompt ( model, Cmd.none )
 
         AIPromptFieldChanged newField ->
             case model.modalState of
+                AINewPrompt _ ->
+                    ( { model | modalState = AINewPrompt newField }, Cmd.none )
+
                 AIPrompt isWaiting _ ->
                     ( { model | modalState = AIPrompt isWaiting newField }, Cmd.none )
 
@@ -2437,14 +2448,22 @@ viewModal globalData session modalState =
             ]
 
         TemplateSelector ->
-            UI.viewTemplateSelector language
+            UI.viewTemplateSelector session
+                language
                 { modalClosed = ModalClosed
+                , aiNewClicked = AINewClicked
                 , importBulkClicked = ImportBulkClicked
                 , importTextClicked = ImportTextClicked
                 , importOpmlRequested = ImportOpmlRequested
                 , importJSONRequested = ImportJSONRequested
                 }
 
+        AINewPrompt _ ->
+            UIStyled.viewAINewPrompt language
+                { modalClosed = ModalClosed
+                , promptInput = AIPromptFieldChanged
+                }
+
         HelpScreen ->
             HelpScreen.view language
                 (GlobalData.isMac globalData)

src/elm/Styles.elm

@@ -0,0 +1,10 @@
+module Styles exposing (colors)
+
+import Css exposing (hsl, rgb, rgba)
+
+
+colors =
+    { green = hsl 86 0.54 0.51
+    , nearWhite = rgba 255 255 255 0.95
+    , white = rgb 255 255 255
+    }